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

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

<td colspan="3">
     <table id="sbDatagrid" style="width:480px"></table>

</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会得不到表格编辑的数据值。

function endEditing(){
if (editIndex == undefined){return true;}
if ($('#sbDatagrid').datagrid('validateRow', editIndex)){

$('#sbDatagrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值