很好的eayui 编辑例子

来源：互联网发布：directx11编程编辑：程序博客网时间：2024/05/16 15:48
<!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>
0 0