jquery easyui实现可编辑表格

jquery | 2019-09-13 10:02:39

1.首先html标签代码中要加入editor属性

<div>
        <div id="skuToolbar" style="padding:5px;">
                <a onclick="showSelectProductWin()" class="easyui-linkbutton" iconCls="icon-add" plain="false">添加商品</a>
        </div>
        <table id="orderDetailDataGrid" class="easyui-datagrid" toolbar="#skuToolbar" style="width:100%;height:auto" data-options="singleSelect:true,onClickCell:onClickCellOrderDetail">
                <thead>
                        <tr>
                                <th data-options="field:'require_num',width:60,editor:'numberbox'">数量</th>
                                <th data-options="field:'weight',width:100,editor:'datebox'">计划货期</th>
                                <th data-options="field:'description',width:200,editor:'textbox'">备注</th>
                        </tr>
                </thead>
        </table>
</div>

2.扩展实现单元格编辑的方法

$.extend($.fn.datagrid.methods, {
        editCell: function(jq,param){
                return jq.each(function(){
                        var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                        for(var i=0; i<fields.length; i++){
                                var col = $(this).datagrid('getColumnOption', fields[i]);
                                col.editor1 = col.editor;
                                if (fields[i] != param.field){
                                        col.editor = null;
                                }
                        }
                        
                        $(this).datagrid('beginEdit', param.index);
                        for(var i=0; i<fields.length; i++){
                                var col = $(this).datagrid('getColumnOption', fields[i]);
                                col.editor = col.editor1;
                        }
                        
                });
        }
});

3.开始编辑和结束编辑方法对应标签中的onClickCell

var editIndexOrderDetail = undefined;
function endEditingOrderDetail(){
        if (editIndexOrderDetail == undefined){return true}
        if ($('#orderDetailDataGrid').datagrid('validateRow', editIndexOrderDetail)){
                $('#orderDetailDataGrid').datagrid('endEdit', editIndexOrderDetail);
                editIndexOrderDetail = undefined;
                return true;
        } else {
                return false;
        }
}
function onClickCellOrderDetail(index, field){
        if (endEditingOrderDetail()){
                $('#orderDetailDataGrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
                editIndexOrderDetail = index;
        }
}

4.提交的时候要结束编辑

$('#orderDetailDataGrid').datagrid('endEdit', editIndexOrderDetail);


登录后即可回复 登录 | 注册
    
关注编程学问公众号