很好的eayui 编辑例子

最新推荐文章于 2019-06-11 23:25:08 发布

qhf503

最新推荐文章于 2019-06-11 23:25:08 发布

阅读量1k

点赞数

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/easyui.css" rel="stylesheet" />
    <link href="css/icon.css" rel="stylesheet" />
    <link href="css/demo.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
</head>
<body>
    <!--datagrid-->
    <table id="dg"></table>
    <!--dialog-->
    <div id="dd">
        <input type="text" id="txt" />
    </div>
    <script type="text/javascript">
        var columns = [[
            { field: 'A', title: 'A', width: 100, rowspan: 2 },
            { title: 'B', colspan: 3 },
            { title: 'C', colspan: 3 }
        ], [
            {
                field: 'a', title: 'a', width: 100, editor: {
                    type: 'textbox',
                    options: {
                        required: true,
                        missingMessage: '*必填*'
                    }
                }
            },
            {
                field: 'b', title: 'b', width: 100, editor: {
                    type: 'datebox'
                }
            },
            {
                field: 'c', title: 'c', width: 100, editor: {
                    type: 'combobox',
                    options: {
                        data: [{ value: 'cc', text: 'cc' }, { value: 'ccc', text: 'ccc' }],
                        panelHeight: 'auto'
                    }
                }
            },
            {
                field: 'd', title: 'd', width: 100, editor: {
                    type: 'numberbox',
                    options: { precision: 1 }
                }
            },
            { field: 'e', title: 'e', width: 100, editor: { type: 'checkbox', options: { on: '1', off: '0' } } },
             {
                 field: 'f', title: 'f', width: 100, editor: {
                     type: 'dialog',
                     options: {
                         dlgId: 'dd',
                         textId: 'txt',
                         currField: 'f'
                     }
                 }
             }
        ]];
        var data = [{ A: 'A', a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f' }];
        $(function () {
            //初始化弹窗
            $('#dd').dialog({
                title: '弹窗',
                width: 400,
                height: 'auto',
                closed: true,
                cache: false,
                modal: true,
                buttons: [{
                    text: '保存',
                    handler: function () {
                        var index = editIndex;
                        var cellEditor = $('#dg').datagrid('getEditor', { index: index, field: editField });
                        cellEditor.actions.setValue(cellEditor.target, $('#txt').val());
                        $('#dd').dialog('close');
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#dd').dialog('close');
                    }
                }]
            });
            //初始化表格
            $('#dg').datagrid({
                data: data,
                title: '对账报告- PA02',
                iconCls: 'icon-title',
                width: 650,
                height: 'auto',
                singleSelect: true,
                fitColumns: false,
                columns: columns,
                rownumbers: true,
                showFooter: true,
                pagination: true,//分页控件
                fit: true,//自动大小
                border: true,
                onLoadSuccess: onLoadSuccess,
                toolbar: [{
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        editCell = false;
                        if ($('#dg').datagrid('validateRow', editIndex)) {
                            $('#dg').datagrid('endEdit', editIndex);
                            $('#dg').datagrid('appendRow', {});
                            $('#dg').datagrid('selectRow', editIndex + 1).datagrid('beginEdit', editIndex + 1);
                            editIndex = editIndex + 1;
                        }
                    }
                }]
            });
            //设置分页控件
            var p = $('#dg').datagrid('getPager');
            $(p).pagination({
                pageSize: 10,//每页显示的记录条数，默认为10
                pageList: [5, 10, 15],//可以设置每页记录条数的列表
                beforePageText: '第',//页数文本框前显示的汉字
                showRefresh: false,
                afterPageText: '页    共 {pages} 页',
                displayMsg: '<span style="font-size:20px;font-weight:700"></span>当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
        });
        var editIndex = -1;//标识编辑行
        var editField;//正在编辑的单元格所属字段
        function onLoadSuccess() {
            editIndex = $('#dg').datagrid('getRows').length - 1;
        }
        //重写editor,添加弹出框类型
        $.extend($.fn.datagrid.defaults.editors, {
            dialog: {
                init: function (container, options) {
                    var editor = $('<input type="text"/>').appendTo(container);
                    editor.textbox(options);
                    container.click(function () {
                        $('#' + options['dlgId']).dialog('open');
                        editField = options['currField'];
                    });
                    return editor;
                },
                getValue: function (target) {
                    return $(target).textbox('getValue', $(target).val());
                },
                setValue: function (target, value) {
                    if (value)
                        $(target).textbox('setValue', value);
                    else
                        $(target).textbox('setValue', '');
                },
                resize: function (target, width) {
                    $(target).textbox('resize', width);
                },
                destroy: function (target) {
                    $(target).textbox('destroy');
                }
            }
        });
    </script>
</body>
</html>

qhf503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
很好的eayui 编辑例子

var columns = [[ { field: 'A', title: 'A', width: 100, rowspan: 2 }, { title: 'B', colspan: 3 }, { title: 'C', colspan: 3 } ], [ {
复制链接

扫一扫