Datagrid行可编辑，展开详细信息可编辑

Datagrid行可编辑，展开详细信息可编辑

第一次写博客，大神不吝赐教。

一般情况下，datagrid的详细信息都是固定的，或者是从数据库直接查找的，本文是针对数据列表的详细信息可编辑的，还有很多瑕疵。

• datagrid的行信息的校验（单元格的编辑，单元格内容内容）
• datagrid的行与详细信息的匹配
• 详细信息的的校验（单元格的编辑，单元格内容内容）
• 行编辑与详细信息编辑之间的冲突

---

1.新建一个datagrid

<div class="contentStyle" align="center">
            <div id="fieldxy_tb">
                <a id="append_xy" href="javascript:void(0)" class="easyui-linkbutton"  
                    data-options="iconCls:'icon-add',plain:true" onclick="appendxy()">添加</a>
                <a id="removeit_xy" href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-remove',plain:true" onclick="removexy()">移除</a>
                <a id="removeit_xy" href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-copy',plain:true" onclick="appendcopy()">复制</a>
                <a id="append_xy" href="javascript:void(0)" class="easyui-linkbutton"  
                    data-options="iconCls:'icon-add',plain:true" onclick="appendxyddv_con()">添加详细信息</a>
                <a id="removeit_xy" href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-remove',plain:true" onclick="removexyddv_con()">移除详细信息</a>
                <a id="removeit_xy" href="javascript:void(0)" class="easyui-linkbutton" 
                    data-options="iconCls:'icon-moveup',plain:true" onclick="moveUpxyddv_con()">详细信息上移</a>
                <a id="removeit_xy" href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-movedown',plain:true" onclick="moveDownxyddv_con()">详细信息下移</a>
            </div>
            <table id="fieldxy" data-options="toolbar:'#fieldxy_tb',border:true,title:'数据列表',width:652,height:355,rownumbers:true,
                singleSelect:true,onClickRow:onClickRow_fieldxy">
                <thead>
                    <tr>
                        <th data-options="field:'id',width:145,hidden:true">ID</th>
                        <th data-options="field:'pname',width:145,editor:{type:'textbox',options:{required:true}}">名称</th>
                        <th data-options="field:'pvalposition',width:80">位置</th>
                        <th data-options="field:'datatypes',width:100,editor: {type:'combobox',options:{data:datatypes,valueField:'value',                      textField:'text',panelHeight:'auto'}}">类型</th>
                    </tr>
                </thead>
            </table> 
        </div>

2.datagrid的初始化

var dataiteminfo =[];//行信息的临时保存
var editIndex_xy =undefined;//行编辑的下标 
var dataAcinfo =[];//详细信息的临时保存
var editIndex_ddv_con ="";//行信息的ID+详细信息的下标
$(document).ready(function() {
    $('#fieldxy').datagrid({
        url:'', 
        view: detailview,
        data: dataiteminfo,
        detailFormatter:function(index,row){
           return '<div style="padding:2px"><table id="ddv' + row.id + '" class="ddv" data-options="width:610"></table></div>';
        },
        onExpandRow: function(index,row){
          //判断行下标是否一致
          if(editIndex_xy!=undefined && editIndex_xy!=index){
              $('#fieldxy').datagrid('collapseRow',editIndex_xy);
              $('#fieldxy').datagrid('fixDetailRowHeight',editIndex_xy);
          }
          //根据id查找行的详细信息
          var acinfo = chooseAcinfo(row.id);
          $('#fieldxy').datagrid('endEdit',editIndex_xy).datagrid('selectRow',index);
          editIndex_xy=index;
          ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
          ddv.datagrid({
            url:'',
            fitColumns:true,
            singleSelect:true,
            rownumbers:true,
            loadMsg:'',
            height:'auto',
            title:'详细信息',
            columns:[[
              {field:'fid',title:'行ID',hidden:true},    
              {field:'headposition',title:'位置',width:100,editor:{type:'textbox',options:{required:true,validType:'LetterNum'}}},
              {field:'headpriority',title:'优先级',width:100}
            ]],
            data:acinfo,
            onResize:function(){
              $('#fieldxy').datagrid('fixDetailRowHeight',index);
            },
            onLoadSuccess:function(){
              setTimeout(function(){
                $('#fieldxy').datagrid('fixDetailRowHeight',index);
              },0);
            },onClickRow:function(index,rowddv){
                if (endEditing_ddv_con()){
                    ddv.datagrid('selectRow', index).datagrid('beginEdit', index);
                    editIndex_ddv_con =  rowddv.fid+index;
                } else {
                    ddv.datagrid('selectRow', parseInt(editIndex_ddv_con.substring(36)));
                }
            }
          });
          $('#fieldxy').datagrid('fixDetailRowHeight',index);
        },
        onCollapseRow : saveAcinfo
      });
});

注意：
validType:’LetterNum’需要在WebRoot/*/validatebox.js中加入新的校验方式：

 //字母开头，非0开头数字结尾；
    LetterNum : {
        validator: function (value) {  
            var reg =/^[A-Z][A-Z]*[1-9][0-9]*$/;  
            return reg.test(value);  
        },  
        message: '请输入正确的单元格位置,如：D3'

    }

//展开行时加载详细信息，并根据优先级排序
function chooseAcinfo(fid){
    var dataAcinfo =[];
    if(dataitemacinfo.length >0){
        for(var i=0;i<dataitemacinfo.length;i++){
            if(fid == dataitemacinfo[i].fid){
                dataAcinfo.push(dataitemacinfo[i]);
            }
        }
    }
    //根据优先级排序
    if(dataAcinfo.length >0){
        for(var k=dataAcinfo.length-1;k>-1;k--){
            for(var j=0; j<dataAcinfo.length-1;j++){
                if(dataAcinfo[j].headpriority>dataAcinfo[j+1].headpriority){
                    var daAc = dataAcinfo[j];
                    dataAcinfo[j] = dataAcinfo[j+1];
                    dataAcinfo[j+1] = daAc;
                }
            }
        }
    }
    return dataAcinfo;
}

//折叠时保存配置的详细信息
function saveAcinfo(index,rowddv){
    editIndex_ddv_con = "";
    var ddv_rows = $(this).datagrid('getRowDetail',index).find('table.ddv').datagrid('getRows');
    if(ddv_rows!=undefined && ddv_rows.length>0){
        for(var i=0;i<ddv_rows.length;i++){
            $(this).datagrid('getRowDetail',index).find('table.ddv').datagrid('endEdit',i);
            if(JSON.stringify(dataitemacinfo).indexOf(ddv_rows[i])!= -1){
                dataitemacinfo.push(ddv_rows[i]);
            }
        }
    }
}

3.增加行，删除行，上移下移详细信息

增加行

//坐标配置信息-添加一行
function appendxy(){
    //折叠所有的行；
    saveTempDataItem();
    var flag_check  = -1;
    var edit_rows =  $('#fieldxy').datagrid('getRows');
    if (endEditing_xy()){
        //生成UUID
        var  dataitemID =  guid();
        $('#fieldxy').datagrid('endEdit',editIndex_xy);
        var temp_data = {
            id : dataitemID,
            pname:'',
            datasource:''
        };
        dataiteminfo.push(temp_data);
        $('#fieldxy').datagrid('loadData',dataiteminfo);
        editIndex_xy = $('#fieldxy').datagrid('getRows').length-1;
        //详细信息正在编辑的下标
        editIndex_ddv_con = "";
        $('#fieldxy').datagrid('selectRow', editIndex_xy).datagrid('beginEdit', editIndex_xy);
    }   
}

//折叠所有的行；
function saveTempDataItem(){
    dataiteminfo=[];
    var rows = $('#fieldxy').datagrid('getRows');
    if(undefined != rows && rows.length>0){
        for(var i =0 ; i<rows.length;i++){
            $('#fieldxy').datagrid('collapseRow',i);
            if($('#fieldxy').datagrid('validateRow', i)){
                $('#fieldxy').datagrid('endEdit',i);
            }
            if(dataiteminfo.indexOf(rows[i])== -1){
                dataiteminfo.push(rows[i]);
            }
        }
    }
}

//生成UUID
function guid() {  
   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());  
}; 
function S4() {  
   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);  
};

删除行

function removexy(){
    var row = $('#fieldxy').datagrid('getSelected');
    if(undefined == row || null == row || "" == row){
        setMessage("请选择要删除的行!");
        return;
    }
    if (editIndex_xy == undefined){return;}
    //删除行下的详细信息；
    deleConfig(row.id);
    $('#fieldxy').datagrid('cancelEdit', editIndex_xy).datagrid('deleteRow', editIndex_xy);
    editIndex_xy = undefined;
    editIndex_ddv_con = "";
}

//删除行下的详细信息；
function deleConfig(id){
    var dataitemacinfo_temp = [];
    var dataiteminfo_temp = [];
    for(var i=0;i<dataitemacinfo.length;i++){
        if(id!=dataitemacinfo[i].fid){
            dataitemacinfo_temp.push(dataitemacinfo[i]);
        }
    }
    for(var i=0;i<dataiteminfo.length;i++){
        if(id!=dataiteminfo[i].id){
            dataiteminfo_temp.push(dataiteminfo[i]);
        }
    }
    dataiteminfo = dataiteminfo_temp;
    dataitemacinfo = dataitemacinfo_temp;
}

上移下移详细信息

//上移详细信息
function moveUpxyddv_con(){
    var row = ddv.datagrid('getSelected');
    if (row == null) {
        setMessage("请选择移动详细信息!");
        return;
    }
    var index = ddv.datagrid('getRowIndex', row);
    if(ddv.datagrid('validateRow', index)){
        mysort(index, 'up', ddv);
    }else{
        setMessage("请填写有效行详细信息!");
        return false;
    }
}
//下移详细信息
function moveDownxyddv_con(){
    var row =ddv.datagrid('getSelected');
    if (row == null) {
        setMessage("请选择移动详细信息!");
        return;
    }
    var index = ddv.datagrid('getRowIndex', row);
    if(ddv.datagrid('validateRow', index)){
        mysort(index, 'down', ddv);
    }else{
        setMessage("请填写有效行详细信息!");
        return false;
    }
}
//排序
function mysort(index, type, gridname) {
    gridname.datagrid('endEdit',index);
    if ("up" == type) {
        if (index != 0) {
            var toup = gridname.datagrid('getData').rows[index];
            var todown = gridname.datagrid('getData').rows[index - 1];
            todown["headpriority"]=index+1;
            toup["headpriority"]=index;
            gridname.datagrid('getData').rows[index] = todown;
            gridname.datagrid('getData').rows[index - 1] = toup;
            gridname.datagrid('refreshRow', index);
            gridname.datagrid('refreshRow', index - 1);
            gridname.datagrid('selectRow', index - 1);
        }
    } else if ("down" == type) {
        var rows = gridname.datagrid('getRows').length;
        if (index != rows - 1) {
            var todown = gridname.datagrid('getData').rows[index];
            var toup = gridname.datagrid('getData').rows[index + 1];
            todown["headpriority"]=index+2;
            toup["headpriority"]=index+1;
            gridname.datagrid('getData').rows[index + 1] = todown;
            gridname.datagrid('getData').rows[index] = toup;
            gridname.datagrid('refreshRow', index);
            gridname.datagrid('refreshRow', index + 1);
            gridname.datagrid('selectRow', index + 1);
        }
    }
}

4.行结束编辑，详细信息结束编辑
行结束编辑

var editIndex_xy = undefined;
function endEditing_xy(){
    if (editIndex_xy == undefined){
        return true;
    }
    if ($('#fieldxy').datagrid('validateRow', editIndex_xy)){
        $('#fieldxy').datagrid('endEdit', editIndex_xy);
        editIndex_xy = undefined;
        return true;
    } else {
        return false;
    }
}

详细信息结束编辑

var editIndex_ddv_con = "";
function endEditing_ddv_con(){
    if (editIndex_ddv_con == ""){return true;}
    if ("" != editIndex_ddv_con){
        var ddv_index = parseInt(editIndex_ddv_con.substring(36));
        if (ddv.datagrid('validateRow', ddv_index)){
            ddv.datagrid('endEdit', ddv_index);
            editIndex_ddv_con = "";
            return true;
        } else {
            return false;
        }
    }
}

自我总结 ：

1.行信息与各自的详细信息之间的关联的处理，UUID；
2.实际情况比较复杂，在添加行，添加详细信息时，需要校验行，行的详细信息的内容；
3.展开和折叠后，行信息的校验和行的详细信息的校验，因为没有onBeforeCollapseRow和onBeforeExpandRow方法，校验时注意校验的位置。

能看到这里，说明你真的很好学，加油！！！