easyui datagrid 扩展

最新推荐文章于 2023-05-05 08:41:59 发布

gywyb

最新推荐文章于 2023-05-05 08:41:59 发布

阅读量1.7k

点赞数 1

文章标签： easyui datagrid 表格内部新增修改删除

本文链接：https://blog.csdn.net/gywyb/article/details/50717780

版权

本文介绍了在不使用前端框架的情况下，针对EasyUI Datagrid的扩展实践，实现了表格内部的新增、修改和删除功能。作者提到在有限的团队资源下，承担了更多职责，并分享了相关插件的实现效果和源码。

摘要由CSDN通过智能技术生成

本人一向是主张前端不要用什么框架，主要是框架的灵活性不大，而且臃肿。

最近公司在开发一个产品，先说说团队成员吧：4个开发（其中包含我）、一个项目经理、2个对业务比较熟悉的老总，没了，这个是我最不想的开发团队，因为没美工、没测试、没架构...反正这些都落到开发头上了，你们可以想象一下吧，我是中途插入这个项目的，说说自己的感受吧业务分析走前面没什么问题，可是架构、数据库设计这些不是应该走在前面嘛，反正....

不说了发发牢骚还是言归正传吧，这个插件主要是基于easyui对datagrid 进行扩展：包含表格内部新增、修改、删除：

以下是效果图:

插件源码：

/***********************************************************
作    者：wyb
创建时间：2016.01.13 
更新时间：2016.01.28
-------------------------------------------------------------
名称:datagridExpand
功能：easyui datagrid 扩展 包含：新增、修改、删除、保存
参数:(以下参数都是可选参数)
名称                类型                                 描述
isDelColumn         bool                                是否新增【删除】操作列 默认值：true
DelColumnWidth      string|int                          删除列宽度 默认值：50
initNewRow          bool                                是否加载时新增行 默认值：true
endEditing          function(editIndex,save)            保存之前回调函数,editIndex 当前编辑行索引,前提条件是：endEditingCofrim=true save datagrid保存方法
endEditingCofrim    bool                                结束编辑前是否确认, 外部方法根据情况调用保存方法 默认：false
removeit            function(row,del)                   删除行回调函数,前提条件是：removeitConfirm=true  row 是删除行信息,del datagrid移除方法
removeitConfirm     bool                                是否确认服务器删除

endEdited           function                            保存成功回调方法
loadEnd             function (appendRow)                datagrid初始化完执行的方法,appendRow 新增行
isSaveAddRow        bool                                保存时是否自动新增行,默认：true
---------------------------------------------------------------
调用示例:
html:
    <table id="dg" class="easyui-datagrid">
        <thead>
            <tr>
            <th data-options="field:'field',width:'25%'"></th>
            </tr>
        <thead>
    </table>
js: 
    $(funciton(){
       $('#dg').datagridExpand({参数});
    });
-------------------------------------------------------------
数据中加入字段：
    disabledDel:true --该行不能被删除
    disabledEdit:true --该行不能被编辑
        
--------------------------------------------------------------

************************************************************/
(function ($) {
    $.fn.datagridExpand = function (options) {
        options = $.extend({}, $.fn.datagridExpand.defaults, options);
        var defaults = {
            removeit: function (row, del) { }, //移除行回调函数  
            removeitConfirm: false,//是否确认服务器删除
            initNewRow: true,//是否加载时新增行 
            endEditing: function (editIndex, save) { }, //结束编辑回调函数 
            endEdited: function () { },//保存成功回调方法
            endEditingCofrim: false,//结束编辑前是否确认, 外部方法根据情况调用保存方法
            isDelColumn: true,//是否新增【删除】操作列
            DelColumnWidth: 50,//删除列宽度
            loadEnd: function (appendRow) { },//datagrid初始化完执行的方法
            isSaveAddRow: true//保存时是否自动新增行
        };
        options = $.extend(defaults, options || {});
        var datagridAction = {
            datagrid: null,
            editIndex: undefined,
            endEdit: function () {
                datagridAction.datagrid.datagrid('endEdit', datagridAction.editIndex);
                datagridAction.editIndex = undefined;
                options.endEdited();
                if (isEmptyRow(datagridAction.datagrid) && options.isSaveAddRow) {//判断是否存在空行 不存在就新增一行
                    datagridAction.append();
                }
            },
            deleteRow: function () {
                if (datagridAction.editIndex == undefined) { return; }
                datagridAction.datagrid.datagrid('cancelEdit', datagridAction.editIndex).datagrid('deleteRow', datagridAction.editIndex);
                datagridAction.editIndex = undefined;
            },
            endEditing: function () {