如何让easyui的datagrid添加链接图标
展开全部
第一步,我需要 在datagrid行里添加一列,field指向id(field:'id'),然后对这列进行格式化处理(formater:格式化函数),如下:
<th data-options="field:'id',width:180,formatter: rowformater">操作</th>
复制代码
第二步:
根据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)的方法。为了看起来清晰明白,我只在函数里写了一句话(放在<head>标签里),事实上项目上需要做一些基本的判断。:
<script type="text/javascript">
function rowformater(value,row,index)
{
return "<a href='"+row.id+"' target='_blank'>操作</a>";
}
</script>
复制代码
OK,应该能跑起来了。跑出的结果就是上面的截图样式。
注意:自己做了以后发现,如果UI中一行的多个列需要用到数据源中的同一列,那么可能会有问题,需要把这UI中的多个列并到同一列中,共同使用数据源中的这同一列。
<th data-options="field:'id',width:180,formatter: rowformater">操作</th>
复制代码
第二步:
根据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)的方法。为了看起来清晰明白,我只在函数里写了一句话(放在<head>标签里),事实上项目上需要做一些基本的判断。:
<script type="text/javascript">
function rowformater(value,row,index)
{
return "<a href='"+row.id+"' target='_blank'>操作</a>";
}
</script>
复制代码
OK,应该能跑起来了。跑出的结果就是上面的截图样式。
注意:自己做了以后发现,如果UI中一行的多个列需要用到数据源中的同一列,那么可能会有问题,需要把这UI中的多个列并到同一列中,共同使用数据源中的这同一列。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询