[jQuery EasyUI]datagrid的行内增删改查代码

公司手机上填写报销单的页面总算是改完,暂时告一段落了。这时又要有这么一个过程了,之后会有管理员对所填内容的 对应项目编号 会修改。用手机上去修改不合适了,这不,又拾起了jQuery EasyUI ,做了个PC端的修改页面。很久没用过 jQuery EasyUI 了,这确实是款非常棒的框架,极其方便。想着我今后还想结合ThinkPHP和EasyUI组成一套管理系统的框架,来吧,再熟悉熟悉。

现在改的内容是DotNet的后台,PHP后台思路一样。主要还是EasyUI框架的使用,和如何与后台交互的思路,大家好好理解下。

如下代码主要是 EasyUI datagrid 的增删改查的内容。一行行敲下来会有不少收获。

EasyUI datagrid行内增删改查代码

html代码:

<body class="easyui-layout">
        <script src="~/Scripts/WebJS/BaoXiao/BaoXiao.DayBaoXiao.js"></script>
        <!--北部区域 开始-->
        <div data-options="region:'center'" style="padding:10px">
            <table id="ttFee"></table> 

            <div id="tb" style="padding:3px">
                <div>
                    @*<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.add();">添加</a>*@
                    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.edit();">修改</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.del();">删除</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="obj.save();" style="display:none;" id="btnSave">保存</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="obj.redo();" style="display:none;" id="btnRedo">取消</a>
                </div>
                <div>
                    <span>开始日期:</span>    
                    <input id="bDate" type="text" style="border:1px solid #ccc" class="easyui-datebox" editable="false" value="@ViewBag.BeginDate" >  
                    <span>结束日期:</span>    
                    <input id="eDate" type="text" style="border:1px solid #ccc" class="easyui-datebox"  editable="false" value="@ViewBag.EndDate"> 
                    <span>姓名:</span>    
                    <input id="SUName" type="text" style="border:1px solid #ccc"> 
                    <a href="#" class="easyui-linkbutton" plain="true" onclick="obj.search()">查询</a>  
                    @*<a href="#" class="easyui-linkbutton" plain="true" onclick="obj.clear()">清空</a>  *@ 
                </div>    
            </div>     
        </div>
        <!--北部区域 结束-->
        <div data-options="region:'south',split:true" style="height: 210px;">
            <table id="ttRoutes"></table> 
        </div>
    </body>

对应的js文件:

$(function() {
    var ttFee = $('#ttFee'),
        ttRoutes = $('#ttRoutes'),
        fmRoutes = $('#fmRoutes');
    ttFee.datagrid({
        url: '/BaoXiao/GetDataPaginationByCon',
        fit: true,
        fitColumns: true,
        rownumbers: true,
        singleSelect: true,
        columns: [
        [
        {
            field: 'ID',
            title: 'ID',
            width: 40,
            //checkbox:true,
        },
        {
            field: 'UserID',
            title: '填单人ID',
            hidden: true,
        },
        {
            field: 'UserName',
            title: '填单人',
            width: 50,
        },
        {
            field: 'PlanDate',
            title: '日期',
            width: 80,
            editor: {
                type: 'datebox',
                options: {
                    editable: false,
                }
            },
            formatter: function(value, rowData, rowIndex) {
                return value.substr(0, 10);
            }
        },
        {
            field: 'BelongType',
            title: '归集对象',
            width: 80,
            editor: {
                type: 'combobox',
                options: {
                    editable: false,
                    valueField: 'val',
                    textField: 'txt',
                    data: [
                        { val: '设备类', txt: '设备类' },
                        { val: '正常配件', txt: '正常配件' },
                        { val: '技术服务配件', txt: '技术服务配件' },
                        { val: '项目类', txt: '项目类' },
                        { val: '非项目类', txt: '非项目类' },
                        { val: '其他', txt: '其他' },
                        { val: '正常安装', txt: '正常安装' },
                        { val: '保内服务', txt: '保内服务' },
                        { val: '保外服务', txt: '保外服务' },
                        { val: '现场技改', txt: '现场技改' },
                        { val: '巡检', txt: '巡检' },
                        { val: '新品安装', txt: '新品安装' },
                        { val: '培训', txt: '培训' },
                        { val: '外部资金', txt: '外部资金' },
                        { val: '研发项目', txt: '研发项目' },
                        { val: '产品取证', txt: '产品取证' },
                        { val: '日常工作', txt: '日常工作' },
                        { val: '人员借用', txt: '人员借用' }
                    ]
                }
            }
        },
        {
            field: 'BelongNumber',
            title: '对应编号',
            width: 100,
            editor: {
                type: 'combobox',
                options: {
                    delay: 500,
                    panelWidth:500,
                    mode: 'remote',
                    url: '/BaoXiao/GetNumber',
                    valueField:'BelongNumber',
                    textField: 'numFull',
                    onSelect: function (record) {
                        var numFull = record.numFull;
                        var cusName = numFull.split('/')[3];
                        var rows = ttFee.datagrid('getSelections');
                        var rowIndex = ttFee.datagrid('getRowIndex', rows[0]);
                        var edCusName = ttFee.datagrid('getEditor', { index: rowIndex, field: 'CusName' });
                        $(edCusName.target).val(cusName);
                    }
                }
            }
        },
        {
            field: 'CusName',
            title: '客户名称',
            width: 100,
            editor: {
                type: 'text',
            }
        },
        {
            field: 'ContentRequire',
            title: '工作要求',
            width: 100,
            editor: {
                type:'text',
            }
        },
        {
            field: 'ContentType',
            title: '内容分类',
            width: 60,
            editor: {
                type: 'combobox',
                options: {
                    editable: false,
                    panelHeight:100,
                    valueField: 'val',
                    textField: 'txt',
                    data: [
                        { val: '拜访', txt: '拜访' },
                        { val: '回款', txt: '回款' },
                        { val: '投标', txt: '投标' },
                        { val: '安装', txt: '安装' },
                        { val: '其他', txt: '其他' }
                    ]
                }
            }
        },
        {
            field: 'Effect',
            title: '完成效果',
            width: 60,
            editor: {
                type: 'combobox',
                options: {
                            editable: false,
                            panelHeight: 50,
                            valueField: 'val',
                            textField: 'txt',
                            data: [
                                { val: '完成', txt: '完成' }, { val: '未完成', txt: '未完成' }
                            ]
                        }
                    }
                },
                 {
                     field: 'ContentDes',
                     title: '工作说明',
                     width: 100,
                     editor: {
                         type:'text',
                     }
                 },
                {
                    field: 'Dept',
                    title: '费用承担人 部门',
                    width: 140,
                    editor: {
                        type: 'combobox',
                        options: {
                            id: 'selDept',
                            editable:false,
                            url: '/BaoXiao/GetDept',
                            valueField: 'DeptName',
                            textField: 'DeptName',
                            onSelect:function(record) {
                                var dept = record.DeptName;
                                var rows = ttFee.datagrid('getSelections');
                                var rowIndex = ttFee.datagrid('getRowIndex', rows[0]);
                                var edSaler = ttFee.datagrid('getEditor', { index: rowIndex, field: 'FeeAfford' });
                                $(edSaler.target).combobox('reload','/BaoXiao/GetSaler?dept='+dept);
                            }
                        }
                    }
                },
                {
                    field: 'FeeAfford',
                    title: '费用承担人 姓名',
                    width: 100,
                    editor: {
                        
                        type: 'combobox',
                        options: {
                            editable: false,
                            panelHeight:120,
                            valueField: 'UserName',
                            textField: 'UserName',
                        }
                    }
                },
                {
                    field: 'WFState',
                    title: '审核状态',
                    width: 100,
                },
                {
                    field: 'YiBaoXiao',
                    title: '报销状态',
                    width: 100,
                    formatter: function(value, rowData, rowIndex) {
                        //console.log(rowData);
                        //console.log(value);
                        var wfState = rowData.WFState;
                        if (wfState == '通过') {
                            var tcolor = (value == 1) ? 'green' : 'red';
                            var text = (value == 1) ? '已报销' : '未报销';
                            return '<span style="color:' + tcolor + '">' + text + '</span>';
                        } else {
                            return '';
                        }
                    }
                },
                {
                    field: 'InsertTime',
                    title: '填单日期',
                    width: 100,
                    formatter: function(value, rowData, rowIndex) {
                        dt = value.substr(0, 10);
                        times = value.substr(11, 8);
                        //console.log(value);
                        //console.log(times);
                        return dt + ' ' + times;
                    }
                }
            ]
        ],
        pagination: true,
        idField: 'ID',
        pageSize: '15',
        pageList: [15, 30, 45],
        toolbar: '#tb',
        onClickRow: function(rowIndex, rowData) {
            //console.log(rowData.ID);
            ttRoutes.datagrid('loading');
            loadRoutes(rowData.ID);
            $('#fmRoutes input[name=FeeID]').val(rowData.ID);
        },
        onDblClickRow: function(rowIndex, rowData) {
            //console.log(rowIndex);
            if (obj.editRow != undefined) {
                ttFee.datagrid('endEdit', obj.editRow);
            }
            if (obj.editRow == undefined) {
                $('#btnSave,#btnRedo').show();
                ttFee.datagrid('beginEdit', rowIndex);
                obj.editRow = rowIndex;
            }
            //ttFee.datagrid('beginEdit', rowIndex);
        },
        onAfterEdit: function(rowIndex, rowData, changes) {
            //console.log(rowData);
            $('#btnSave,#btnRedo').hide();
            ttFee.datagrid('loading');
            $.post('/BaoXiao/UpdateFee', { FeeID: rowData.ID, BelongNumber: rowData.BelongNumber, row: JSON.stringify(rowData) }, function (data) {
                ttFee.datagrid('loaded');
                //console.log(data);
                if (data > 0) {
                    $.messager.show({
                        title: '成功',
                        msg: '保存成功!',
                    });
                    obj.editRow = undefined;
                } else {
                    $.messager.show({
                        title: '失败',
                        msg: '保存失败!',
                    });
                }
            });

        }
    });

    $(document).keydown(function(e) {
        if (e.keyCode == 13) {
            obj.search();
        }
    });

    obj = {
        editRow: undefined,
        search: function() {
            //console.log($('#bDate').val());
            //console.log($('#eDate').datebox('getValue'));
            ttFee.datagrid('load', {
                username: $.trim($('#SUName').val()),
                begindate: $('#bDate').datebox('getValue'),
                enddate: $('#eDate').datebox('getValue'),
            });
        },
        edit: function() {
            var rows = ttFee.datagrid('getSelections');
            if (rows.length == 1) {
                if (this.editRow != undefined) {
                    ttFee.datagrid('endEdit', this.editRow);
                }
                if (this.editRow == undefined) {
                    var rowIndex = ttFee.datagrid('getRowIndex', rows[0]);
                    $('#btnSave,#btnRedo').show();
                    ttFee.datagrid('beginEdit', rowIndex);
                    this.editRow = rowIndex;
                    ttFee.datagrid('unSelectRow', rowIndex);
                }
                //ttFee.datagrid('beginEdit', rowIndex);
            } else {
                $.messager.show({
                    title: '警告',
                    msg: '修改时只能选择一条数据',
                });
            }
        },
        add: function() {
            $('#btnSave,#btnRedo').show();
            //只能添加一行
            if (this.editRow == undefined) {
                //添加一行
                ttFee.datagrid('insertRow', {
                    index: 0,
                    row: {
                    
                    }
                });
                //将第一行设置为可编辑状态
                ttFee.datagrid('beginEdit', 0);
                this.editRow = 0;
            }

        },
        save: function() {
            //将第一行设置为结束编辑
            ttFee.datagrid('endEdit', this.editRow);
        },
        redo: function() {
            $('#btnSave,#btnRedo').hide();
            this.editRow = undefined;
            ttFee.datagrid('rejectChanges');
        },
        del: function() {
            var rows = ttFee.datagrid('getSelections');
            if (rows.length > 0) {
                $.messager.confirm('确定操作', '您真的要删除这些记录吗?', function(flag) {
                    if (flag) {
                        var ids = [];
                        for (var i = 0; i < rows.length; i++) {
                            ids.push(rows[i].ID);
                        }
                        console.log(ids.join(','));
                        $.post('/BaoXiao/DeleteFee', { ids: ids.join(',') }).then(function(data) {
                            if (data > 0) {
                                $.messager.show({
                                    title: '成功',
                                    msg: '删除成功!',
                                });
                                ttFee.datagrid("reload");
                            } else {
                                $.messager.show({
                                    title: '失败',
                                    msg: '删除失败!',
                                });
                            }
                        });
                    }
                });
            } else {
                $.messager.show({
                    title: '警告',
                    msg: '请选择要修改的 记录',
                });
            }
        },
        setAudit: function() {
            var rows = ttFee.datagrid('getSelections');
            console.log(rows);
            if (rows.length > 0) {
                $.messager.confirm('确定操作', '您真的要将该记录改为 待审 状态吗?', function(flag) {
                    if (flag) {
                        $.post('/BaoXiao/SetAudit', { fid: rows[0]['ID'], uid: rows[0]['UserID'] })
                            .then(function(data) {
                                if (data < 0) {
                                    $.messager.show({
                                        title: '成功',
                                        msg: '已设为待审状态!',
                                    });
                                    ttFee.datagrid("reload");
                                } else {
                                    $.messager.show({
                                        title: '失败',
                                        msg: '设待审状态 失败!',
                                    });
                                }
                            });
                    }
                });
            } else {
                $.messager.show('警告', '请选择要修改的记录', 'warning');
            }
        },
        setBack: function() {
            var rows = ttFee.datagrid('getSelections');
            //console.log(rows);
            if (rows.length > 0) {
                $.messager.confirm('确定操作', '您真的要将该记录改为 不通过 状态吗?', function(flag) {
                    if (flag) {
                        $.post('/BaoXiao/SetBack', { fid: rows[0]['ID'], uid: rows[0]['UserID'] })
                            .then(function(data) {
                                if (data < 0) {
                                    $.messager.show({
                                        title: '成功',
                                        msg: '已设为 不通过 状态!',
                                    });
                                    ttFee.datagrid("reload");
                                } else {
                                    $.messager.show({
                                        title: '失败',
                                        msg: '设 不通过 状态 失败!',
                                    });
                                }
                            });
                    }
                });
            } else {
                $.messager.show('警告', '请选择要修改的记录', 'warning');
            }
        },
        setPass:function() {
            var rows = ttFee.datagrid('getSelections');
            //console.log(rows);
            if (rows.length > 0) {
                $.messager.confirm('确定操作', '您真的要将该记录改为 通过 状态吗?', function (flag) {
                    if (flag) {
                        $.post('/BaoXiao/SetPass', { fid: rows[0]['ID'], uid: rows[0]['UserID'] })
                            .then(function (data) {
                                if (data < 0) {
                                    $.messager.show({
                                        title: '成功',
                                        msg: '已设为 通过 状态!',
                                    });
                                    ttFee.datagrid("reload");
                                } else {
                                    $.messager.show({
                                        title: '失败',
                                        msg: '设 通过 状态 失败!',
                                    });
                                }
                            });
                    }
                });
            } else {
                $.messager.show('警告', '请选择要修改的记录', 'warning');
            }
        }
    }

    ttRoutes.datagrid({
        fit: true,
        fitColumns: true,
        rownumbers: true,
        columns: [
            [
                {
                    field: 'ID',
                    title: 'ID',
                    width: 100,
                    //hidden:true,
                },
                {
                    field: 'FeeType',
                    title: '类型',
                    width: 100,
                },
                {
                    field: 'Fee',
                    title: '费用',
                    width: 100,
                },
                {
                    field: 'StartPlace',
                    title: '起点',
                    width: 100,
                },
                {
                    field: 'EndPlace',
                    title: '终点/发生地',
                    width: 100,
                },
                {
                    field: 'FeeNum',
                    title: '发票张数',
                    width: 100,
                },
                {
                    field: 'InsertTime',
                    title: '录入时间',
                    width: 100,
                    hidden: true,
                }
            ]
        ],
        toolbar: [
            {
                text: '新增',
                iconCls: 'icon-add',
                handler: function() {
                    if ($('#fmRoutes input[name=FeeID]').val() == 0) {
                        $.messager.show({
                            title: '提示',
                            msg: '请先选择 一行 主表数据!',
                        });
                        return;
                    }
                    //新增时 主键ID为0。避免之前修改过别的明细,主键ID不为0的异常
                    $('#fmRoutes input[name=ID]').val('0');
                    openfmRoutes();
                }
            },
            {
                text: '修改',
                iconCls: 'icon-edit',
                handler:function() {
                    var row = ttRoutes.datagrid('getSelections');
                    if (row.length > 1) {
                        $.messager.alert('警告', '修改 只能选中一条数据!');
                    } else if (row.length == 1) {
                        fmRoutes.form('load', row[0]);
                        openfmRoutes();
                    }
                }
            },
            {
                text: '删除',
                iconCls: 'icon-remove',
                handler:function() {
                    var row = ttRoutes.datagrid('getSelections');
                    if (row.length == 0) {
                        $.messager.show({
                            title: '提示',
                            msg: '请先选择数据',
                        });
                    } else {
                        var feeID = row[0].FeeID;
                        $.messager.confirm('确定', '确定要删除选中的记录吗?', function(flag) {
                            if (flag) {
                                var ids = [];
                                for (var i = 0; i < row.length; i++) {
                                    ids.push(row[i].ID);
                                }
                                $.messager.progress({ text: '正在删除中!' });
                                $.post('/BaoXiao/DeleteRoutes', { ids: ids.join(',') })
                                    .then(function(data) {
                                        $.messager.progress('close');
                                        if (data > 0) {
                                            $.messager.show({
                                                title: '提示',
                                                msg: '删除成功!',
                                            });
                                            loadRoutes(feeID);
                                        } else {
                                            $.messager.show({
                                                title: '提示',
                                                msg: '删除失败!',
                                            });
                                        }
                                });
                            }
                        });
                    }
                    
                }
            },
        ]
    });

    $('#fmRoutes input[name=Fee]').validatebox({
        validType: 'SHUZI',
        invalidMessage:'只能输入数字(小数亦可)!',
    });

    $('#fmRoutes input[name=FeeNum]').numberspinner({
        min: 0,
        max: 50,
        editable: false,
    });





    //打开 fmRoutes 表单
    function openfmRoutes() {
        fmRoutes.dialog({
            width: 350,
            title: '路线',
            iconCls: 'icon-add',
            modal: true,
            closed: true,
            buttons: [
                {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                        //保存  代码
                        saveRoutes();
                    }
                },
                {
                    text: '取消',
                    iconCls: 'icon-redo',
                    handler: function () {
                        fmRoutes.dialog('close');
                        //.form('reset');
                    }
                }
            ]
        }).dialog('open');
    }


    //保存路线
    function saveRoutes() {
        if (fmRoutes.form('validate')) {
            $.messager.progress({ text: '正在保存!' });
            $.post('/BaoXiao/SaveRoutes', { routes: JSON.stringify(serializeObject(fmRoutes)) })
                .then(function (data) {
                    $.messager.progress('close');
                    if (data > 0) {
                        $.messager.show({
                            title: '提示',
                            msg: '保存成功!',
                        });
                        loadRoutes($('#fmRoutes input[name=FeeID]').val());
                        fmRoutes.dialog('close').form('reset');
                        
                    } else {
                        $.messager.show({
                            title: '提示',
                            msg: '保存失败!',
                        });
                    }
            });
        }
    }


    //加载 Routes 路线数据
    function loadRoutes(ID) {
        $.post('/BaoXiao/GetRoutes', { FeeID: ID }, function (data) {
            //console.log(data);
            ttRoutes.datagrid('loadData', data).datagrid('loaded');
        });
    }


});

我之前的增删改查做的都是修改弹出form修改数据的,那个以后再分享吧。现在这个版本是行内修改的。

一行行代码敲下来,对EasyUI datagrid的理解也更进一步了。在以后的使用过程中,如果碰到有难度的问题,解决后我也会再次分享。

分享到:更多 ()

4

评论前必须登录!

 

  1. #3

    Hello there! This is kind of off topic but I need some help from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about setting up my own but I’m not sure where to begin. Do you have any ideas or suggestions? Thanks

    • It’s not very difficult to set up your own blog. You can set up your blog with the help of WordPress or any other Blog system. This Blog of mine is set up by WordPress and Themed by DUX.

      admin5年前 (2015-12-25)
  2. #2

    owc anastrozole interactions anastrozole 1 mg for men letrozole anastrozole comparison

    Aruhananuu5年前 (2016-02-19)
  3. #1

    fcs anastrozole 0.25 mg balkan pharmaceuticals anastrozole absorption anastrozole and fatigue

    Abajibimak5年前 (2016-02-21)