您的位置:首页 > 产品设计 > UI/UE

easyui datagrid 批量编辑和提交数据

2015-12-30 15:28 946 查看
easyuidatagrid行编辑和提交方,废话就不多说了,直接上代码

<divstyle="margin:5px;">
<tableid="dg"class="easyui-datagrid"title="确认单据"style="width:100%;height:540px;margin:20px;"
data-options="loadMsg:'正在加载,请稍候...',
nowrap:false,
border:true,
methord:'post',
collapsible:false,
fit:false,
fitColumns:false,
remoteSort:true,
rownumbers:true,
pagination:true,
pageSize:20,
pageList:[20,30,40,50,100],
striped:true,
toolbar:'#tb',
onClickRow:onClickRow,
singleSelect:false">
<thead>
<tr>

<thdata-options="field:'obj2',width:140,align:'center',checkbox:true">物料代码</th>
<thdata-options="field:'obj1',width:75,display:'none',align:'center'">主键ID</th>
<thdata-options="field:'DJID',width:70,align:'center'">单据ID</th>
<thdata-options="field:'obj3',width:240,align:'center'">物料描述</th>
<thdata-options="field:'obj4',width:75,align:'center'">计划数量</th>
<thdata-options="field:'obj5',width:75,align:'center'">计划重量</th>
<thdata-options="field:'obj6',width:80,align:'center'">实际入库数量</th>
<thdata-options="field:'obj7',width:80,align:'center'">实际入库重量</th>
<thdata-options="field:'obj8',width:80,align:'center',editor:'text'">入高架库数量</th>
<thdata-options="field:'obj9',width:80,align:'center',editor:{type:'text'}">入高架库重量</th>
<thdata-options="field:'obj10',width:80,align:'center',editor:{type:'text'}">入线边库数量</th>
<thdata-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>
</tr>
</thead>
</table>
<divid="tb"style="height:auto">
<ahref="javascript:void(0)"class="easyui-linkbutton"data-options="iconCls:'icon-save',plain:true"onclick="accept()">保存</a>
</div>

</div>
界面:



注意:

Table的data-options属性onClickRow:onClickRow属性双击行改变行状态,用于编辑数据


<thdata-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>
其中的

editor:{type:'text'}属性可以在双击后启用单元格的状态


vareditIndex=undefined;
functionendEditing(){
if(editIndex==undefined){returntrue}
if($('#dg').datagrid('validateRow',editIndex)){
$('#dg').datagrid('endEdit',editIndex);
editIndex=undefined;
returntrue;
}else{
returnfalse;
}
}
functiononClickRow(index){
if(editIndex!=index){
if(endEditing()){
$('#dg').datagrid('selectRow',index)
.datagrid('beginEdit',index);
editIndex=index;
}else{
$('#dg').datagrid('selectRow',editIndex);
}
}
}

functionaccept(){
if(endEditing()){
varrows=$('#dg').datagrid('getChanges');
var$dg=$('#dg');
if($dg.datagrid('getChanges').length){
//varinserted=$dg.datagrid('getChanges',"inserted");//获取添加状态的行
//vardeleted=$dg.datagrid('getChanges',"deleted");//获取删除状态的行
varupdated=$dg.datagrid('getChanges',"updated");//获取修改状态的行
vareffectRow=newObject();
if(updated.length){
effectRow["updated"]=JSON.stringify(updated);
}
$.post("/PFK/ashx/UpdateManger.ashx",effectRow,function(rsp){
debugger;
if(rsp.status){
$.messager.alert("提示","提交成功!");
$dg.datagrid('acceptChanges');
}
},"JSON").error(function(){
//$.messager.alert("提示","提交错误了!");
});
}
}
}




stringupdated=context.Request["updated"];
List<ShowCCK_DHModle>modelList=null;
if(updated!="")
{
modelList=RFIDScan.CommFunction.JsonDeserialize<List<ShowCCK_DHModle>>(updated);
}
//获取数据后的其他操作



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: