easyui data-grid 实现行内编辑 多选操作 功能

1、datagrid配合单元格编辑的部分

配置datagrid属性：

onDblClickCell:onDblClickCell,
onEndEdit:onEndEdit

var dg = $('#dg').datagrid({
url: '../../qian_tai/getAllMingXiDanInfo.do', //后台返回数据的请求url
pagination: true,//是否使用分页功能
singleSelect:false,//设置可以多选

queryParams : {ddbm:row},
checkbox:true,//设置第一列显示复选框
toolbar:$("#tb"),
onDblClickCell:onDblClickCell,
onEndEdit:onEndEdit

}); 定义 onDblClickCell，onEndEdit方法
  var editIndex = undefined;
function onDblClickCell(index, field){
$('#dg').datagrid('unselectAll')

$('#dg').datagrid('selectRow',index)
var row =$('#dg').datagrid('getSelected');//获取被选中的对象
if(row["peiSongZhuangTai"]=="未配送")//只有未配送的明细才可以编辑
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});

if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function(){
$('#dg').datagrid('selectRow', editIndex);
},0);
}
}
}
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'chanPinBianMa'
});
row.chanPinMingCheng = $(ed.target).combobox('getText');
}

function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}获取变更的记录
function getChanges(cao_zuo){
var rows=""
if(cao_zuo=="2"){
rows = $('#dg').datagrid('getChanges');
alert(JSON.stringify(rows))
}
if(cao_zuo=="3"){
rows=$('#dg').datagrid('getChecked')
for(var i=0;i<= rows.length-1;i++){
if(rows[i].peiSongZhuangTai!="未配送"){
alert(i)
rows.splice(i,1);
}
}

}

url_="../../qian_tai/xiuGaiDingDanMingXi.do?cao_zuo="+cao_zuo;
$.ajax({
type:"POST",
url:url_,
contentType : 'application/json;charset=utf-8',
data:JSON.stringify(rows),
dataType:"json",
success:function(data){
alert(data.res);
$('#dg').datagrid("reload")
},
error:function(XMLHttpRequest, textStatus){
if(XMLHttpRequest.status==403){
var result = eval("("+XMLHttpRequest.responseText+")");
alert("登录失败，请重新登录");
window.location.href="login.do"

}
}
});

}保存修改记录
function accept(){
if (endEditing()){
getChanges("2")
$('#dg').datagrid('acceptChanges');
}
}

editor 

editor 是 column 属性之一，如果想一个单元格是可编辑的，则必须要设置这个对象。

设置editor属性可以通过js方式，代码如下所示。下面的代码为设置 datagrid filed 为chanPinBianMa列的editor。

editor属性包含两个参数，type和options,源文档如下：

Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible types are: text,textbox,numberbox,numberspinner, combobox,combotree,combogrid,datebox,datetimebox, timespinner,datetimespinner,
textarea,checkbox,validatebox.
options: object, the editor options corresponding to the edit type.

//设置产品单元格editor
$("#dg").datagrid('getColumnOption', "chanPinBianMa").editor = {//设置chanPINBianMa列的editor,getColumnOptions为获取列的当前所有option
type:'combobox',
options:{
valueField:'chanPinBianMa',
textField:'chanPinMingCheng',
url: "../../getAllKuCun.do?shi_chang_bian_ma=" + scbm
+ "&wang_dian_bian_ma=" + wdbm + "&ku_cun_you_xiao=1&sffy=1",
required:true,
onChange : function() {
var code = $(this).combobox('getValue').trim();//获取选中的产品编码

$.getJSON("../../qian_tai/getAllShiChangDingJiaInfo.do", {
code : scbm,
cpcode : code,
scdj_yx : '1'
}, function(data, status) {
if (status == "success") {
$.each(data, function(index, entity) {

var row =$('#dg').datagrid('getSelected');//获取被选中的对象
var ed_ding_jia_bian_ma =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'shiChangDingJiaBianMa'});
var ed_ding_jia =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'chanPinDingSongJiaGe'});

$(ed_ding_jia_bian_ma.target).textbox('setValue', entity.shiChangDingJiaBianMa);
$(ed_ding_jia.target).textbox('setValue', entity.chanPinDingSongJiaGe);

$(ed_ding_jia.target).textbox("disable");

});
} else {
alert("获取数据失败！");
}
});
}

}

} 上面的代码是给一个单元格绑定combobox类型的下拉框，并设置下拉框的参数。其中设置了 onChange属性，当下拉框的值改变时，同时调整另外两列中对应单元格的值。
var ed_ding_jia_bian_ma =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'shiChangDingJiaBianMa'});
var ed_ding_jia =$('#dg').datagrid('getEditor', {index:$("#dg").datagrid('getRowIndex', row),field:'chanPinDingSongJiaGe'});
通过上面的代码获取这两列的editor，这两列的editor是在table中的 th中的data-options中设置的，代码如下：
<th data-options="field:'riSongShuLiang',align:'right',editor:'textbox'">日送数量</th>
<th data-options="field:'shiChangDingJiaBianMa',align:'right',editor:'textbox',hidden:true">定价编码</th> 通过下面的代码更改单元格的值，并将chanPingDingSongJiaGe对应的单元格设置为不可编辑
$(ed_ding_jia_bian_ma.target).textbox('setValue', entity.shiChangDingJiaBianMa);
$(ed_ding_jia.target).textbox('setValue', entity.chanPinDingSongJiaGe);
$(ed_ding_jia.target).textbox("disable");

2、设置第一列的复选框
table 第一列增加如下列

<th data-options="field:'ck',checkbox:true"></th>

datagrid属性中设置 checkbox:true