easyui data-grid 實現行內編輯 多選操作 功能
阿新 • • 發佈:2019-01-24
1、datagrid配合單元格編輯的部分
配置datagrid屬性:
onDblClickCell:onDblClickCell,
onEndEdit:onEndEdit
定義 onDblClickCell,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 });
獲取變更的記錄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