easyui 创设可编辑的表格

easyui 创建可编辑的表格

$('#infodatagrid').datagrid({
????nowrap: false,
????striped: true,
????loadMsg:'数据加载中请稍后……',
????url:'<c:url value="/jxc/depot/findImportDocumentInfo.jsps?documentId="/>'+'<c:out value="${d.documentId}"/>',
????collapsible:true,
?????? singleSelect:true,
?????? showPageList: true,
?????????????? ?pageSize: 20,??
????frozenColumns:[[
???????????????? {title:'选择',field:'infoId',width:30,checkbox:true}
????]],
????columns:[[
?????{field:'matCode',title:'料号',width:100},
?????{field:'matName',title:'产品名称',width:100},
?????{field:'matStandard',title:'规格',width:100},
?????{field:'matLibNumber',title:'当前库存量',width:100},
?????{field:'documentNumber',title:'数量',width:50,editor:'numberbox'},
?????{field:'documentFunction',title:'用途',width:70,
??????editor:{
???????type:'combobox',
???????options:{
?????????????????????? valueField:'id',
?????????????????????? textField:'text',
?????????????????????? required:true,
?????????????????????? editable:false
?????????????????? }
??????},
??????formatter:function(value,rowData,index){?
????????????????????????? for(var i=0; i < comboboxData_.length; i++){
????????if(value == comboboxData_[i].id){
?????????return comboboxData_[i].text;
????????}
???????}
???????????????????? ?}?
??????},
?????{field:'opt',title:'操作',width:180,
?????? formatter:function(value,rowData,index){?
????????????????????????? var a = '<a href="#" onclick="editInfo(\''+ index + '\')">编辑</a>&nbsp;&nbsp;';
????????????????????????? var b = '<a href="#" onclick="saveInfo(\''+ index + '\')">保存</a>&nbsp;&nbsp;';???
????????????????????????? var c = '<a href="#" onclick="delInfo(\''+ index +'\')">删除</a>';
????????????????????????? var d = '<span style="display: none" id="'+index+'">保存成功</span>';
????????????????????????? return a+b+c+d;?
???????????????????? ?}?
?????????????????? }
????]],
????onBeforeEdit:function(index,row){
?????????? row.editing = true;
???????},
?????? onAfterEdit:function(index,row){
?????????? row.editing = false;??
?????? },
?????? onCancelEdit:function(index,row){
?????????? row.editing = false;
?????? },
????//pagination:true,
????rownumbers:true
???});

?

?

//入库明细行编辑
??function editInfo(index){
???$('#infodatagrid').datagrid('acceptChanges'); //让表格接受改变的数据?
???$('#infodatagrid').datagrid('clearSelections');?//首先清空所以选择
???$('#infodatagrid').datagrid('beginEdit', index);
???$('#infodatagrid').datagrid('selectRow',index);?//编辑时 选择这一行
???
???//当编辑时，加载下拉框数据
????var amount = $('#infodatagrid').datagrid('getEditor', {index:index, field:'documentFunction'}).target;
???amount.combobox("loadData", comboboxData_);
???$("#"+index).hide();?//隐藏消息提示
??}

?

?

?

<table id="infodatagrid"></table>