自定义表格指令edGrid

edGrid是对jQuery DataTables的封装,增加默认的修改、删除操作。

一 使用方法:

<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 | code : 'gender'">性别</th>
	     
	   <th ed-data="telephone">手机号码</th>
	     
	   <th ed-data="userState | code : 'userstate'">用户状态</th>
	     
	   <th ed-data="remark">用户描述</th>
	     
	   <th ed-data="_edit">操作</th>
	    </tr>
	    </thead>
	</table>
	

通过ed-grid来定义表格

1、表格需定义三个个自定义属性

  • ed-grid表格名称,默认为grid,用于绑定表格默认事件。,如果一个页面有多个表格,则需要指定ed-grid的属性值
  • ed-url用来知道初始化表格数据的URL,如ed-url="user/query.do"
  • ed-model指定编辑或删除等其他点击事件时所绑定的model ,如ed-model="user"

2、表格的列通过<th>的自定义属性来配置

ed-data用来指定json字段key,存在三个默认值_checkbox则该列显示为复选框(此时表格即支持多选),_index则该列显示为行序号,_edit则显示编辑和删除按钮

ed-data可使用过滤器filter来进行格式化输出。如用code带一个参数来做字典转换,将字典的code值转为name。在表格中存在一个过滤器user,表示该列为用户id,将会转换为用户名称来显示

二 默认操作

所有的默认方法都绑定在表格名称上,默认为$scope.grid,以下都按照默认的来举例;ed-model的值按照user来举例

  • query(params):查询,该方法也接收一个参数,ajax请求时会附带参数,同时该方法还会将与表格名称相同的form中的input加入到查询参数。
  • reset():清空查询条件
  • add():新增,设置$scope.grid.eidt=true
  • update(row):修改,设置$scope.grid.eidt=true,同时绑定 ed-model的值为当前行的数据,如:$scope.user=row
  • delete(row):删除,提交user/delete.do来删除,user为ed-model的值
  • save():保存,提交user/add.do来新增或者user/update.do来修改
  • 通过设置<th>的ed-data="_checkbox"使表格支持多选时,选中的行会绑定到ed-model的值+s上,本例中则绑定到users

增删改查都支持重载,可以根据自己的业务需要在controller中重新实现,比如:

$scope.grid = {     
	add : function(){     
	    ...     
	} } 

三 自定义列

第一种方式

th指定ed-data时同时指定过滤器filter,如:

<th ed-data="money | number : 8">金额</th><!-- 金额保留两位小数-->
	

支持多过滤器及自定义过滤器,过滤器的使用请参考后面过滤器章节教程。

第二种方式

$scope.grid = {     
	column_defs: [     
	    {     
	     
	   target: 5,     
	     
	   template: '<a href="">Not Amanda Smith?</a>'     
	    },     
	    {     
	     
	   target: 6,     
	     
	   template: function(row) {     
	     
	     
	  return '<a href="">Not Amanda Smith?</a>';     
	     
	   }     
	    },     
	    {     
	     
	   target: 7,     
	     
	   buttons: [     
	     
	     
	  {     
	     
	     
	     
	 name: '角色',     
	     
	     
	     
	 class: 'btn-success',     
	     
	     
	     
	 icon: 'fa-edit',     
	     
	     
	     
	 enable: function(row) {     
	     
	     
	     
	     
	return true;     
	     
	     
	     
	 },     
	     
	     
	     
	 visiable: function(row) {     
	     
	     
	     
	     
	return true;     
	     
	     
	     
	 }     
	     
	     
	     
	 event: function(row, btn)      
	     
	     
	  }     
	     
	   ]     
	    }     
	] } 

通过column_defs来自定义列

  • target用来知道列序号,从0开始
  • template用来指定列html模板,可以为html字符串;也可以为一个方法返回html字符串,方法有一个参数row对象来返回列数据。html模板中的事件通过ed-click来制定,指定回去从$scope.grid中找到这个方法去调用。
  • buttons指定列按钮,如果指定了template,buttons将会被忽略

buttons有4个属性

  • name: 按钮名称
  • class: css样式
  • icon: 按钮图标样式
  • enable:是否允许点击,默认可点击,不可点击时增加disabledclass
  • visiable:是否显示,默认显示
  • event: function(row, btn) {}点击事件 注意,如果buttons对应列的ed-data="_edit",则会加入到默认的修改、删除按钮之前

四 集成jQuery Datatables属性

除以上自定义扩展外,可使用jQuery Datatables的属性,这些options也可以通过table的data-options属性来指定,比如:data-options="paging: false, lazy: true",使用data-options不能设置下面的onSelect 类似的function

$scope.deptPosGrid = {     
	options: {     
	    scroller: true,     
	    paging: false,// 是否翻页     
	    lazy: true,// 是否延迟加载,这个属性是自定义属性,jQuery Datatables本身没有     
	    select :     
	    }     
	} }; 

五 表格编辑

表格目前支持点击单元格变成输入框进行编辑。开启的方式为:表头的列通过<th>增加class="edit input|select"目前仅支持这两种,未来继续扩展。
注:如果通过column_defs格式化单元格显示,尚不支持编辑完之后再次格式化

编辑模式下,表格多了一个方法:

  • getChangedRows():获取修改后的行

版权及转载说明

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

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