您好,欢迎访问一九零五行业门户网

给Jquery easyui 的datagrid 每行增加操作链接

通过formatter方法给jquery easyui 的datagrid 每行增加操作链接
我们都知道jquery的easyui的datagrid可以添加并且自定义toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如“修改”、“删除”、“查看”之类。如下图:
这是个很实用的功能,但是搜索了一下,好像也没见到谁写过,我就找了easyui的document,随便写一下,抛砖引玉。
思路:一般来讲,增加操作链接就是要用url+id的方式把页面跳转到新页面,所以需要在正常输出的一行后面加一列操作列用来显示操作链接。easyui的datagrid没有直接添加link的属性,所以我需要格式化一下这一“操作”列的输出。
解决方法:
第一步,我需要 在datagrid行里添加一列,field指向id(field:'id'),然后对这列进行格式化处理(formater:格式化函数),如下: 操作
第二步:
根据documentation的描述,formatter的格式化函数有3个parameters,分别是:
value: the field value,也就是field:'id'。
rowdata: the row record data。就是这一行的json数据,包括你已经选择在datagrid上显示的内容,和没显示的内容。因为我的json数据里包括了id这一内容,所以我可以直接调用。如果你作为数据源的json里没有id属性,需要修改一下json的输出。我的每行json输出是类似{id:1,name:\u7ecf\u6d4e\u53d1\u5c55,parentid:0}的结构
rowindex: the row index.当前行的index。
所以我写rowformater这个函数的时候,也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白,我只在函数里写了一句话(放在
标签里),事实上项目上需要做一些基本的判断。: ok,应该能跑起来了。跑出的结果就是上面的截图样式。
参考:http://www.jeasyui.com/documentation/index.php的datagrid章节 ad:真正免费,域名+虚机+企业邮箱=0元
其它类似信息

推荐信息