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中设置的,代码如下:
日送数量
定价编码
通过下面的代码更改单元格的值,并将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");
table 第一列增加如下列