easyui实现datagrid---行内单元格联动、单选、多选

90 阅读 0 评论 60 点赞

我是靠谱客的博主超帅翅膀，最近开发中收集的这篇文章主要介绍easyui实现datagrid---行内单元格联动、单选、多选，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

找了许多的文章查询最终实现功能，代码部分为粗体，其余是解说：

</td>

$("#sbDatagrid").datagrid({
  idField:'id' ,
fitColumns: false ,
striped: true ,
loadMsg: '数据正在加载,请耐心的等待...' ,
rownumbers:true ,
singleSelect : false,
columns:[[
{field:'ck' , checkbox:true} ,

{field:'stationVal',title:'',width:100,hidden:true,editor : { type : 'textbox'} },

注意这里是textbox这里的内容主要是为了显示text用的，因为编辑之后数值总是显示value值，所以现将text保存下来在对显示只进行更改。stationVal=station的text

{
field:' station' ,
title:'车站' ,
width:100,
align:'center' ,
formatter:function (value,row,rowIndex) {
return row.stationVal;
} , //让显示的为textField
editor : {

type : 'combobox',

options : {
  url: '<%=basePath%>/getEeeeeAction.action?eeeId='+'<%=orgId%>',
  async: false,
valueField: 'key',
textField: 'value',
editable:false,
onSelect:function(data){
var row = $('#sbDatagrid').datagrid('getSelected');
var rowIndex = $('#sbDatagrid').datagrid('getRowIndex',row); //获取行号
var thisTarget = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'station'}).target;
var value = thisTarget.combobox('getValue');
var thisTargetVal = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'stationVal'}).target;
thisTargetVal.textbox('setValue',thisTarget.combobox('getText')); //保存text值
var target = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'sblx'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'getEquipmentPeriodTypeAction.action?stationId='+value;
target.combobox('reload', url); //联动下拉列表重载
},
required:true ,
missingMessage:'车站必填!'
}
}
},
{field:'sblxVal',title:'',width:100,hidden:true,editor : { type : 'textbox'} }, //sblxVal同stationVal功能一样
{
field:'sblx' ,
title:'设备检修类型' ,
width:100 ,
   formatter:function(value,row,rowIndex){
  return row.sblxVal;
}, //让显示的为textField
editor : {
type : ' combobox',
options : {
url:'getEquipmentPeriodTypeAction.action?stationId=0',
valueField: 'keyStr',
  textField: 'value',
  editable:false,
onSelect:function(data){
var row = $('#sbDatagrid').datagrid('getSelected');
var rowIndex = $('#sbDatagrid').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'sblx'}).target;
var value = thisTarget.combobox('getValue');
var thisTargetVal = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'sblxVal'}).target;
thisTargetVal.textbox('setValue',thisTarget.combobox('getText'));

var target1 = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'station'}).target;
var value1=target1.combobox('getValue');
var target = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'equIds'}).target;
target.combobox('clear'); //清除原来的数据
//通过设备类型和车站寻找设备
var nums=value.split("$");
var url = 'queryEqueForMtAction.action?typeId='+nums[0]+'&stationId='+value1;
target.combobox('reload', url);//联动下拉列表重载
}
}
}
},

{field:'equIdsVal',title:'',width:100,hidden:true,editor : { type : 'textbox'} },

//equIdsVal同stationVal功能一样

{
field:'equIds' ,
title:'设备' ,
width:230 ,
formatter:function(value,row,rowIndex){
  return row.equIdsVal;
},     //让显示的为textField
editor : {
type : 'combobox',
options : {
  editable:false,
   multiple:true,//多选
url:'queryEqueForMtAction.action?typeId=28&stationId=1',
valueField:'id',
textField:'name',
panelHeight:'auto',
onLoadSuccess: function (res) {
   if(res.rows){
$(this).combobox('loadData', eval(res.rows));
  } //视情况而定，看action的返回值
},
onSelect:function(){
var row = $('#sbDatagrid').datagrid('getSelected');
var rowIndex = $('#sbDatagrid').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'equIds'}).target;
var value = thisTarget.combobox('getValues');

var thisTargetVal = $('#sbDatagrid').datagrid('getEditor', {'index':rowIndex,'field':'equIdsVal'}).target;
thisTargetVal.textbox('setValue',thisTarget.combobox('getText'));
}
}
}
}
]] ,
   onClickRow: function (rowIndex, rowData) {
  editIndex =rowIndex;
$("#sbDatagrid").datagrid('selectRow', rowIndex);
$("#sbDatagrid").datagrid('beginEdit', rowIndex);//设置可编辑状态
},//当点击的时候为可编辑状态
toolbar:[
{
text:'添加设备',
iconCls:'icon-add' ,
handler:function(){
if( endEditing()){
$('#sbDatagrid').datagrid('unselectAll');
$('#sbDatagrid').datagrid('appendRow',{
stationVal:'',
station:'',
sblxVal:'',
sblx:'',
equIdsVal:'',
equIds:''
});
editIndex = $('#sbDatagrid').datagrid('getRows').length -1;
//4选中并开启编辑状态
$('#sbDatagrid').datagrid('selectRow',editIndex);
$('#sbDatagrid').datagrid('beginEdit', editIndex);
}
}
},
{
text:'删除设备',
iconCls:'icon-remove' ,
handler:function(){
var selRow = $('#sbDatagrid').datagrid('getSelections');
if(selRow.length <= 0 ){
$.messager.show({
title:'提示信息',
msg:'请选择进行删除操作!'
});
} else {
$.messager.confirm('提示信息' , '确认删除?' , function(r){
if(r){
//批量获取选中行的评估模板ID
for (i = 0; i < selRow.length;i++) {
var index = $('#sbDatagrid').datagrid('getRowIndex',selRow[i]);
  $('#sbDatagrid').datagrid('deleteRow', index);
}
} else {
return ;
}
});
}
}
} ]

});

下面这个很重要，作用就是关闭编辑状态保存你的编辑后的值，没有的话datagrid会得不到表格编辑的数据值。