AngularJS 表格增删改查

一 使用方法:

<div class="table" ng-show="!grid.edit">
	<div class="page-bar">
	    <form class="form-inline" role="form" id="queryForm">
	     
	   <div class="form-group">
	     
	     
	  <label class="sr-only">用户名</label>
	     
	     
	  <input type="text" class="form-control" ng-model="grid.query.userCode   placeholder="用户名">
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="sr-only">用户姓名</label>
	     
	     
	  <input type="text" class="form-control" ng-model="grid.query.userName" placeholder="用户姓名">
	     
	   </div>
	     
	   <button class="btn btn-primary" ng-click="grid.query()"><i class="fa fa-search"></i>
	Search</button>
	     
	   <button class="btn btn-default" ng-click="grid.reset()"><i class="fa fa-times"></i>
	Reset     
	    </button>
	    </form>
	</div>
	<div class="portlet">
	    <div class="portlet-title">
	     
	   <div class="caption">
	     
	     
	  Advance Table     
	     
	   <button class="btn btn-success" ng-click="grid.add()"><i class="fa fa-plus"></i>
	新增 </button>
	     
	   </div>
	    </div>
	    <div class="portlet-body">
	     
	   <table ed-grid class="table table-striped table-bordered table-advance table-hover"     
	     
	     
	 ed-url="user/query.do" ed-model="user">
	     
	     
	  <thead>
	     
	     
	  <tr>
	     
	     
	     
	 <th ed-data="_index"></th>
	     
	     
	     
	 <th ed-data="userCode">用户名</th>
	     
	     
	     
	 <th ed-data="userName">用户姓名</th>
	     
	     
	     
	 <th ed-data="gender" ed-option="gender">性别</th>
	     
	     
	     
	 <th ed-data="telephone">手机号码</th>
	     
	     
	     
	 <th ed-data="userState" ed-option="userstate">用户状态</th>
	     
	     
	     
	 <th ed-data="remark">用户描述</th>
	     
	     
	     
	 <th ed-data="_edit">操作</th>
	     
	     
	  </tr>
	     
	     
	  </thead>
	     
	   </table>
	    </div>
	</div>
	

之前在第八节已经详细的介绍了一些表格的基本操作,这里只是在增删改查上对之前表格的一些补充,如果有一些不清楚的,可以先参考第八节。

  • ng-show指令,主要功能是让某一个指定区域进行显示或者不显示。其值为boolean类型,默认为false。这样就避免了我们修改数据的时候要增加弹出页面。当我们进入表格页面时,$scope.grid.eidt=false,编辑数据的div就不会显示。而当我们点击编辑按钮时,只需要设置$scope.grid.eidt=true,编辑区域就出来了,相应的就会隐藏显示数据的div。是一个非常实用的指令。
  • grid.add() 如果我们在controller中不写直接对应的add(),自定义指令中会默认执行xxx/add.do,这里的xxx对应的就是使用ed-grid指令的 ed-model="user"的属性值,这里即为user,后面就直接以user为例。当然,我们也可以在controller中对add()进行重构,重构方法请参照第八节。
  • 其他需要注意的已在第八节中叙述清楚,可以将第八节与本节对照学习,效果应该会更加好。

二 编辑数据:

<div class="portlet light bordered edit" ng-show="userGrid.edit">
	    <div class="portlet-title">
	     
	   <div class="caption">
	     
	     
	  <i class="icon-equalizer font-red-sunglo"></i>
	     
	     
	  <span class="caption-subject font-red-sunglo bold uppercase">用户编辑</span>
	     
	   </div>
	     
	   <div class="actions">
	     
	     
	  <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;" ng-click="userGrid.cancel();">
	     
	     
	     
	 <i class="icon-action-undo"></i>
	     
	     
	  </a>
	     
	   </div>
	    </div>
	    <div class="portlet-body form">
	     
	   <form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
	     
	     
	  <div class="form-body">
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">用户编号</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <input type="text" class="form-control" name="userCode" ng-model="user.userCode" required>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">用户姓名</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <input type="text" class="form-control" name="userName" ng-model="user.userName"     
	     
	     
	     
	     
	     
	  required ed-validate="name" ng-maxlength="10">
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">性别</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <select class="form-control" name="gender" ng-model="user.gender"     
	     
	     
	     
	     
	     
	   ng-options="opt.value as opt.name for opt in options.gender" required></select>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">手机号码</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <input type="text" class="form-control" ng-model="user.telephone">
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group" ng-show="!user.userId && settings.deptPosEnable">
	     
	     
	     
	     
	<label class="col-md-3 control-label">所属岗位</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <input type="text" class="form-control" ng-model="deptPos.name" readonly>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">状态</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <select class="form-control" ng-model="user.userState"     
	     
	     
	     
	     
	     
	   ng-options="opt.value as opt.name for opt in options.userstate"></select>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	     
	 <div class="form-group">
	     
	     
	     
	     
	<label class="col-md-3 control-label">用户描述</label>
	     
	     
	     
	     
	 <div class="col-md-4">
	     
	     
	     
	     
	    <textarea class="form-control" rows="3" ng-model="user.remark"></textarea>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	  </div>
	     
	     
	  <div class="form-actions">
	     
	     
	     
	 <div class="row">
	     
	     
	     
	     
	<div class="col-md-offset-3 col-md-4">
	     
	     
	     
	     
	    <button type="button" class="btn green" w5c-form-submit="userGrid.save()"><i     
	     
	     
	     
	     
	     
	   class="fa fa-save"></i>
	保存     
	     
	     
	     
	     
	</button>
	     
	     
	     
	     
	    <button type="button" class="btn default" ng-click="userGrid.cancel();validateForm.reset();"><i     
	     
	     
	     
	     
	     
	   class="fa fa-times"></i>
	取消     
	     
	     
	     
	     
	</button>
	     
	     
	     
	     
	</div>
	     
	     
	     
	 </div>
	     
	     
	  </div>
	     
	   </form>
	    </div>
	</div>
	
  • grid.update()调用修改时,ed-grid会同add()一样,默认执行user/update.do,删除方法也同增加和修改方法一样,默认执行user/delete.do,但是都支持重载,重载的格式如下:

    $scope.grid = { update : function(){ ... }, delete : function(){ ... } }

  • ng-options编辑框中的ng-options指令,是解析之前显示框中的ng-options指令的值在code表中对应的值,只需要按照这个例子来书写,就可以完成以前的code转换。实例:ng-options="opt.value as opt.name for opt in options.xxx"最主要的是options.xxx,这里的xxx对应于显示框中的ng-options的属性值。

  • 其他地方就没有什么需要注意的了,记得要将ng-model对应好就可以了,其他的结合第八节应该可以很快熟悉和了解整个增删改查。

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将给予删除