EasyUI 各种执行

最新推荐文章于 2022-04-05 23:08:25 发布

nyistzhang

最新推荐文章于 2022-04-05 23:08:25 发布

阅读量644

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/nyistzhang/article/details/9811821

本文介绍了一个使用 EasyUI 框架实现的 DataGrid 示例，包括如何配置 DataGrid 的属性，如显示行号、图标、自动填充列等，并演示了如何通过工具栏进行增加、修改、删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EasyUI 轻量级框架,下面简单的几个实例实现希望对大家有所帮助，运行平台为EasyUI+MVC

主要实现有datagrid,下拉列表，按钮超链接，日期控件等等！！

A:DataGrid

$('#div_SearchMemo').datagrid({
            title: '档案信息',
            rownumbers: true,//是否显示行号
            iconCls: 'icon-save',//datagrid显示图标
            //            pagination: true,
           // height: 360,
         fitColumns:true,//自动填充列

         singleSelect: true,//限制单行选择
//                      fit:true,
            url: '../../FileManager/GetFileInfo',//链接URL
            columns: [[
            { field: 'IsCheck', title: '是否选择', width: 100, align: 'center', checkbox: true,
                editor: {
                    type: 'checkbox',
                    options: {
                        on: 1,
                        off: 0
                    }//checkbox 选择行
                }
            },
        { field: 'id', title: '序号' },下面这块对应是数据块
        { field: 'FilesID', title: '编号' },
        { field: 'PersonID', title: '身份证号'},
        { field: 'CSINumber', title: '' },
        { field: 'FileNames', title: '名称' },
        { field: 'FileTitle', title: '标   题' },
        { field: 'ClassName', title: '类别' },
        { field: 'Fileorganization', title: '单位' },
        { field: 'FileTerm', title: '有效期' },
        { field: 'CreatePerson', title: '建档人' },
        { field: 'CreateTime', title: '建档时间' },
        { field: 'FileImportment', title: '保密度' },
        { field: 'FInstruction', title: '备    注' }
    ]],
            toolbar: [{//工具条，添加新增，修改，删除按钮；
                text: '增加', iconCls: 'icon-add', handler: function () {
                    $('#dlg').dialog('open').dialog('setTitle', '档案新增');
                     GetValue();//调用其他函数
                }
            }, {
                text: '修改', iconCls: 'icon-edit', handler: function () {
                    var row = $('#div_SearchMemo').datagrid('getSelected');
                    if (row) {
                        $('#dlg').dialog('open').dialog('setTitle', '档案维护');
                        $('#EditAction').form('load', row);
                    }
                }
            }, {
                text: '删除', iconCls: 'remove', handler: function () {
                    var row = $('#div_SearchMemo').datagrid('getSelected');
                    Delete(row.id);
               }
            }]