[jQuery EasyUI]datagrid的弹出form增删改代码

之前我写有一篇文章:jQuery EasyUI datagrid的行内增删改查代码,主要讲了EasyUI的datagrid直接在行内进行修改数据的实现方法。这种行内增删改的方法,比较适合表格列数较少,修改列数不多的情况,当我们有一张表很多列,并且修改的时候,每一列都有可能变动,那么在行内修改的话就有些不太方便了,这时候,我们用弹出一个form表单进行修改再保存就比较合适了。这篇文章就来说说EasyUI的datagrid弹出form增删改的实现

效果

EasyUI弹出form增删改代码

实现代码

html代码

<div data-options="region:'south',split:true" style="height: 270px;">
    <table id="ttRoutes"></table> 
    <form id="fmRoutes" method="POST" style="margin: 0;padding:10px 0 0 40px;">
        <input type="text" value="0" name="ID"/>
        <input type="text" value="0" name="FeeID"/>
        <p><label>&nbsp;&nbsp;&nbsp;费用类型:</label>@*<input type="text" name="FeeType" class="textbox"/>*@
            <select class="easyui-combobox" name="FeeType" style="width:150px; " data-options="panelHeight:120">   
                <option value="交通费">交通费</option>   
                <option value="住宿费">住宿费</option>   
                <option value="招待费">招待费</option>   
                <option value="邮寄费">邮寄费</option>   
                <option value="标书费">标书费</option>   
                <option value="其他">其他</option>   
            </select>  
        </p>
        <p><label>&nbsp;&nbsp;&nbsp;产生费用:</label><input type="text" name="Fee" class="textbox"/></p>
        <p><label>&nbsp;&nbsp;&nbsp;起始地点:</label><input type="text" name="StartPlace" class="textbox"/></p>
        <p><label>发生地/终点:</label><input type="text" name="EndPlace" class="textbox"/></p>
        <p><label>&nbsp;&nbsp;&nbsp;发票张数:</label><input type="text" name="FeeNum" class="textbox" value="0"/></p>
    </form>
</div>
<style type="text/css">
    #fmRoutes input {
        width: 150px;
    }     
</style>

js代码

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');
        });
    }

总结

这绝对是一篇极具干货的文章,代码都是先用的程序中摘出来的,主要是EasyUI前端代码的实现,后台保存修改代码,大体类似,都是修改数据库的过程,大家只要稍作修改就完全可以使用。

分享到:更多 ()

抢沙发

评论前必须登录!