Easyui Datagrid实现行操作

Easyui Datagrid实现行操作

效果

分析

实现此功能需要实现2点

1、首列的内容全部需要渲染成 申请开票
2、点击申请开票可以获获取到指定的行内容，在执行后续操作

实现方案

1、首行格式化，在table的th属性中加入formatter
示例代码如下

<th data-options="field:'orderId',width:120" formatter="formatOperate" >操作</th>

2、在JavaScript中编写代码formatOperate

function formatOperate(val,row){
	return '申请开票';
}

当然也可以子啊 a标签中使用 onclick 来执行需要的功能，例如

function formatOperate(val,row){
	return '+row.id+')">申请开票';
}

注意：这个面doSome(id) 中的参数id 不能是对象，例如不能直接写 doSome(row)

3、如果我们想获取行数据，并且点击了指定的单元格有效，可以在table上使用 onClickCell 单元格点击事件

onClickCell(index, field, value) 在用户点击一个单元格的时候触发。

此时我们可以在table上加上onClickCell然后判断 field 是不是我们点击的filed,如果是在执行后续操作
table在data-option中新增onClickCell

<table style="width:100%;height:100%;" id="dg"
                   data-options="
                   singleSelect:false,
                   fit:true,
                   rownumbers:true,
                   striped:true,
                   autoRowHeight:false,
                   checkOnSelect:true,
                   selectOnCheck:true,
                   pagination:true,
                   pageSize:10,
                   pageList:[50,100,200,500,1000],
                   checkOnSelect:false,
                   sortName : 'lastmodifytime',
                   sortOrder : 'desc',
                   toolbar: '#tb',
                   onClickCell:onClickCell
	        ">

4、在javasrcipt中编写onClickCell方法，此名称可以任意命名 onClickCell:onClickCell 名称需要和后面的这个保持一致；

function onClickCell(index, field, value){
    console.log('index',index)
    console.log('field',field)
    console.log('value',value)
    // 指定列点击时触发
    if (field === 'orderId') {
        let rowData = $(this).datagrid('getData').rows[index];
        // TODO 做你先想做的逻辑
    }
}

以上就完成了Datagrid实现行操作功能，如果你不需要获取整行数据，那么只需要前两步就可以满足，如果需要并且点击的行值唯一，也可以通过唯一属性值查找Datagrid的数据行！