• Easyui datagrid绑定数据,新增,修改,删除写法


    @{
        ViewBag.Title = "xw_xsfl";
    }
    <script type="text/javascript">
        var editIndex = undefined;
        var pxsdata;
        $(function () {
            GetList();
        })
        function GetList() {
            $('#dg').datagrid({
                 'auto',
                height: 'auto',
                scrollbarSize: 0,
                url: 'xw_xsfl_list',
                loadMsg: '正在加载....',
                columns: [[
                    { field: 'ck', title: '',  100, sortable: true, checkbox: true },
                    { field: 'id', title: 'id',  60, sortable: true,hidden: true },
                    { field: 'xsfl', title: '学生分类码',  60, sortable: true,
                        editor: { type: 'textbox', options: { required: true} }
                    },
                    { field: 'xsflmc', title: '学生分类名称',  150, sortable: true,
                        editor: { type: 'textbox', options: { required: true} }
                    },
                    { field: 'action', title: '操作',  100, align: 'center',
                        formatter: function (value, row, index) {
                            if (row.status == 'add') {
                                var c = '<a class="l-btn l-btn-small l-btn-plain" href="javascript:void(0)" onclick=saverow(this,"add")><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">新增</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a> ';
                                return c;
                            }
                            if (row.editing) {
                                var a = '<a class="l-btn l-btn-small l-btn-plain" href="javascript:void(0)" onclick=saverow(this,"edit")><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">保存</span><span class="l-btn-icon icon-save">&nbsp;</span></span></a> ';
                                var b = '<a class="l-btn l-btn-small l-btn-plain" href="javascript:void(0)" onclick="cancelrow(this)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">取消</span><span class="l-btn-icon icon-undo">&nbsp;</span></span></a> ';
                                return a + b;
                            } else {
                                var e = '<a class="l-btn l-btn-small l-btn-plain" href="javascript:void(0)" onclick="editrow(this)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">编辑</span><span class="l-btn-icon icon-edit">&nbsp;</span></span></a> ';
                                return e;
                            }
                        }
                    }
                ]],
    
                fitColumns: true,
                striped: true,
                rownumbers: true, //行号
                singleSelect: false, //是否单选 
                onLoadSuccess: function (data) {
                    $('#dg').datagrid('appendRow', { status: 'add' });
                    var addIndex = $('#dg').datagrid('getRows').length - 1;
                    $('#dg').datagrid('beginEdit', addIndex);
                },
                onBeforeEdit: function (index, row) {
                    row.editing = true;
                    $('#dg').datagrid('refreshRow', index);
                },
                onAfterEdit: function (index, row) {
                    row.editing = false;
                    $('#dg').datagrid('refreshRow', index);
                },
                onCancelEdit: function (index, row) {
                    row.editing = false;
                    $('#dg').datagrid('refreshRow', index);
                }
            });
        }
        function tool_del() {
            var rows = $('#dg').datagrid("getSelections");
            if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                    if (r) {
                        var ids = [];
                        for (var i = 0; i < rows.length; i++) {
                            ids.push(rows[i].id);
                        }
                        var xsfls = ids.join(",");
                        $.ajax({
                            type: 'post',
                            dataType: "json", //返回json格式的数据
                            url: "../xwsb/xw_xsfl_xsflDel",
                            data: { 'xsfls': xsfls },
                            cache: false,
                            success: function (Data) {
                                if (Data == "1") {
                                    $('#dg').datagrid("reload", {});
                                    $.messager.alert("提示", "删除成功");
                                }
                                else {
                                    $.messager.alert("提示", "删除失败", "error");
                                }
                            },
                            error: function (e) {
                                var msg = responseTextTitle(e.responseText);
                                $.messager.alert("提示", msg, "error");
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("提示", "请选择要删除的行", "error");
            }
            
        }
    
        function editrow(target) {
            var thisindex = getRowIndex(target);
            if (editIndex == undefined) {
                $('#dg').datagrid('beginEdit', thisindex);
                editIndex = thisindex;
                var input = $('#dg').datagrid('getEditor', { index: thisindex, field: 'xsfl' }).target;
                $(input).textbox("disable");
            }
        }
    
        function saverow(obj, savetype) {
            var editRow = getRowIndex(obj);
            var req = new Object();
            req.type = savetype;
            var xsfl = $('#dg').datagrid('getEditor', { index: editRow, field: 'xsfl' });
            var xsflmc = $('#dg').datagrid('getEditor', { index: editRow, field: 'xsflmc' });
            req.xsfl = $(xsfl.target)[0].value;
            req.xsflmc = $(xsflmc.target)[0].value;
            if (savetype == "edit") {
                var row = $('#dg').datagrid('getRows')[editRow];
                if (row && row.id != "") {
                    req.id = row.id;
                 }
                
             }
            var jsonObject = JSON.stringify(req);
            $.ajax({
                type: 'post',
                url: "../xwsb/xw_xsfl_xsflEdit",
                data: { 'type': req.type, 'json': jsonObject },
                cache: false,
                success: function (Data) {
                    if (Data == "1") {
                        $('#dg').datagrid("reload");
                        editIndex = undefined;
    
                    }
                    else {
                        $.messager.alert("提示", "保存失败:" + Data, "error");
                    }
                },
                error: function (e) {
                    var msg = responseTextTitle(e.responseText);
                    $.messager.alert("提示", msg, "error");
                }
            });
        }
    
        function cancelrow(target) {
            index = getRowIndex(target);
            $('#dg').datagrid('cancelEdit', index);
            editIndex = undefined;
        }
    
        function getRowIndex(target) {
            var tr = $(target).closest('tr.datagrid-row');
            return parseInt(tr.attr('datagrid-row-index'));
        }
    </script>
    <div class="tools-row">
        @*<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" onclick="tool_del()" >删除</a>*@
        <table cellpadding="0" cellspacing="0" style="100%">
            <tr>
                <td align="right">
                        <button id="btndel" type="button" class="but-primary " onclick="tool_del()"><span class="icon icon-delete"></span>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <table id="dg">
    </table>
  • 相关阅读:
    vscode 快捷键
    Nest 中在当前模块使用其他模块 service 的方式
    Elasticsearch:应用 Nodejs 来访问 Elasticsearch【转载】
    开始使用 Elasticsearch (1)[转载]
    SVO详细解读
    深度滤波器详细解读
    Google Cardboard的九轴融合算法——基于李群的扩展卡尔曼滤波
    相机IMU融合四部曲(三):MSF详细解读与使用
    相机IMU融合四部曲(二):误差状态四元数详细解读
    相机IMU融合四部曲(一):D-LG-EKF详细解读
  • 原文地址:https://www.cnblogs.com/Ajoying/p/Easyui-datagrid.html
Copyright © 2020-2023  润新知