EasyUI界面控件的使用

以你之姓@ 2022-06-05 23:10 610阅读 0赞

转自 ：http://www.cnblogs.com/wuhuacong/p/3317223.html

在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔，本篇继续介绍其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。

我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。

![22154622-0076dcd508ba4355840ff1905c1442f5.png][]

### 1、单行文本框 ###

使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。

![22154825-2bf2d6b2ed5e4e1ebd29dbe05c991918.png][]

界面代码如下所示：

赋值给界面控件代码如下：

$("#Name").val(info.Name);

获取界面控件的值代码如下：

var name = $("#Name").val();

如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：

$("#Name").text(info.Name);

对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。

![复制代码][copycode.gif]

//必输项：
     <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
    
    //格式的验证：
     <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
     <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"></input>
    
    //长度范围的验证：
     <input class="easyui-validatebox" data-options="validType:'length[1,3]'">

![复制代码][copycode.gif]

### 2、多行文本框 ###

easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。

![22154931-3f09390a17fa4558b76586efb1f1ed21.png][]

界面代码如下所示：

或者

赋值给界面控件代码如下：

$("#type_Remark").val(json.Remark);

获取界面控件的值代码如下：

var text = $("#type_Remark").val();

### 3、密码文本框 ###

密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。

![22155215-4aecd8e74673446abf03941484516320.png][]

界面代码如下所示：

赋值给界面控件代码如下：

var password = '123';
    $("#Password").val(password)

获取界面控件的值代码如下：

![复制代码][copycode.gif]

$("#btnLogin").click(function () {
        
                    var postData = {
                        UserName: $("#UserName").val(),
                        Password: $("#Password").val(),
                        Code: $("#Code").val()
                    };

![复制代码][copycode.gif]

### 4、下拉列表Combobox ###

常见的EasyUI的ComboBox是可以输入，也可以从列表选择的内容的输入控件。

![22155816-e75b872b4b1e435da5f3fc59dc14772c.png][]

界面代码如下所示：

绑定下拉列表的数据源代码如下：

$('#type_PID1').combobox({
                    url: '/DictType/GetDictJson',
                    valueField: 'Value',
                    textField: 'Text'
                });

设置控件的选择的内容代码如下：

$("#type_PID1").combobox('setValue', json.PID);

获取界面控件的值代码如下：

var systemType=  $("#txtSystemType_ID").combobox('getValue');

而利用标准的Select控件虽然可以实现从列表选择，不过不够ComboBox控件那么灵活方便，Select控件的界面代码如下：

![22160046-d867a9aa1a2c45be82adc38d5df8bb84.png][]

### 5、日期输入控件 ###

easyui使用class=‘easyui-datebox’来标识日期控件，从弹出的层中选择正确的日期，是一种非常常见的界面输入控件，可以替代My97DatePicker日期输入控件。

![22160431-1ac11199b022497eb42699ad857befbc.png][]

弹出窗体界面效果如下。

![22160441-f6320ef46ca64400910532018bba5392.png][]

它的界面代码如下所示：

赋值给界面控件代码如下：

$("#LastUpdated").datebox('setValue', info.LastUpdated);

获取界面控件的值代码如下：

var lastupate = $("#txtLastUpdated").datebox('getValue');

### 6、数值输入控件 ###

easyui使用样式easyui-numberbox标识为数值类型，其表现为文本框，但只能输入数值。

![22161155-4859195ed83d4096adcc74f1db52653c.png][]

界面代码如下所示：

或者使用‘easyui-numberspinner’样式来标识，可以上下调节数值。

![22161246-d241e97c9815425f9474ffa496a5685b.png][]

赋值给界面控件代码如下：

$('#nn').numberbox('setValue', 206.12);

或者

$('#ss').numberspinner('setValue', 8234725);

获取界面控件的值代码如下：

var v = $('#nn').numberbox('getValue');

或者

var v = $('#ss').numberspinner('getValue');

### 7、单项选择Radio控件 ###

单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。

![22161547-eabd4c0fe9cf4cd29319a787483e65d1.png][]

界面代码如下所示：

![复制代码][copycode.gif]

<tr>
                            <th>
                                <label>数据分开方式：</label>
                            </th>
                            <td>
                                <input name="SplitType" type="radio" class="easyui-validatebox" checked="checked" required="true" value="Split">分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[, ， ; ； / 、]分开，或一行一个　
                                <br />
                                <input name="SplitType" type="radio" class="easyui-validatebox" required="true" value="Line">一行一个记录模式，忽略所有分隔符号
                            </td>
                        </tr>

![复制代码][copycode.gif]

赋值给界面控件代码如下：

$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);

获取界面控件的值代码如下：

$("input[name='SplitType']:checked").val()

或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。

![18150941-fcdea5f7b40d436a93b0d1485437efcf.png][]

其界面代码如下所示：

![复制代码][copycode.gif]

<select id="cc" style="width:150px"></select>
        <div id="sp">
            <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
            <input type="radio" name="lang" value="01"><span>Java</span><br/>
            <input type="radio" name="lang" value="02"><span>C#</span><br/>
            <input type="radio" name="lang" value="03"><span>Ruby</span><br/>
            <input type="radio" name="lang" value="04"><span>Basic</span><br/>
            <input type="radio" name="lang" value="05"><span>Fortran</span>
        </div>
        <script type="text/javascript">
            $(function(){
                $('#cc').combo({
                    required:true,
                    editable:false
                });
                $('#sp').appendTo($('#cc').combo('panel'));
                $('#sp input').click(function(){
                    var v = $(this).val();
                    var s = $(this).next('span').text();
                    $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
                });
            });
        </script>

![复制代码][copycode.gif]

### 8、复选框 ###

复选框是在一项或多项内容中，选择零项或者多项的一个输入界面控件。

![22161826-3d0a0f4e910b40b286d1455ef2650a64.png][]

界面代码如下所示：

<input id="chkIsExpire" type="checkbox" >帐号过期

由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。

基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响

var postData = $("#ffEdit").serializeArray();

以上代码的使用。

![22162010-b6f901dcd14a49a4ba379dd01d698ec6.png][]

使用Select控件的代码如下所示。

赋值给界面控件代码如下：

$("#Visible1").prop('checked', info.Visible);

获取界面控件的值代码如下：

var visible = $("#txtVisible").val();

### 9、表格控件DataGrid ###

easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：

![复制代码][copycode.gif]

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
                data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">
            <thead>
                <tr>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:250">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>

![复制代码][copycode.gif]

不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示

而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。

![22162745-bb551bedf44a40ceb9f5810a8cf5b4ce.png][]

Javascript代码如下所示，其中的width: function () \{ return document.body.clientWidth \* 0.9 \}是用来实现宽度自适应的一个操作。

![复制代码][copycode.gif]

//实现对DataGird控件的绑定操作
            function InitGrid(queryData) {
                $('#grid').datagrid({   //定位到Table标签，Table标签的ID是grid
                    url: '/Menu/FindWithPager',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
                    title: '功能菜单',
                    iconCls: 'icon-view',
                    height: 650,
                    width: function () { return document.body.clientWidth * 0.9 },
                    nowrap: true,
                    autoRowHeight: false,
                    striped: true,
                    collapsible: true,
                    pagination: true,
                    pageSize: 100,
                    pageList: [50,100,200],
                    rownumbers: true,
                    //sortName: 'ID',    //根据某个字段给easyUI排序
                    sortOrder: 'asc',
                    remoteSort: false,
                    idField: 'ID',
                    queryParams: queryData,  //异步查询的参数
                    columns: [[
                        { field: 'ck', checkbox: true },   //选择
                         { title: '显示名称', field: 'Name', width: 200},
                         { title: '图标', field: 'Icon', width: 150 },
                         { title: '排序', field: 'Seq', width: 80 },
                         { title: '功能ID', field: 'FunctionId', width: 80 },
                         { title: '菜单可见', field: 'Visible', width: 80 },
                         { title: 'Winform窗体类型', field: 'WinformType', width: 400 },
                         { title: 'Web界面Url地址', field: 'Url', width: 200 },
                         { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
                         { title: '系统编号', field: 'SystemType_ID', width: 80 }
                    ]],
                    toolbar: [{
                        id: 'btnAdd',
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function () {
                            ShowAddDialog();//实现添加记录的页面
                        }
                    }, '-', {
                        id: 'btnEdit',
                        text: '修改',
                        iconCls: 'icon-edit',
                        handler: function () {
                            ShowEditOrViewDialog();//实现修改记录的方法
                        }
                    }, '-', {
                        id: 'btnDelete',
                        text: '删除',
                        iconCls: 'icon-remove',
                        handler: function () {
                            Delete();//实现直接删除数据的方法
                        }
                    }, '-', {
                        id: 'btnView',
                        text: '查看',
                        iconCls: 'icon-table',
                        handler: function () {
                            ShowEditOrViewDialog("view");//实现查看记录详细信息的方法
                        }
                    }, '-', {
                        id: 'btnReload',
                        text: '刷新',
                        iconCls: 'icon-reload',
                        handler: function () {
                            //实现刷新栏目中的数据
                            $("#grid").datagrid("reload");
                        }
                    }],
                    onDblClickRow: function (rowIndex, rowData) {
                        $('#grid').datagrid('uncheckAll');
                        $('#grid').datagrid('checkRow', rowIndex);
                        ShowEditOrViewDialog();
                    }
                })
            };

![复制代码][copycode.gif]

对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：

![复制代码][copycode.gif]

//绑定查询按钮的的点击事件
            function BindSearchEvent() {
                //按条件进行查询数据，首先我们得到数据的值
                $("#btnSearch").click(function () {
                    //得到用户输入的参数，取值有几种方式：$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val()
                    //字段增加WHC_前缀字符，避免传递如URL这样的Request关键字冲突
                    var queryData = {
                        WHC_ID: $("#txtID").val(),
                        WHC_Name: $("#txtName").val(),
                        WHC_Icon: $("#txtIcon").val(),
                        WHC_Seq: $("#txtSeq").val(),
                        WHC_FunctionId: $("#txtFunctionId").val(),
                        WHC_Visible: $("#txtVisible").val(),
                        WHC_WinformType: $("#txtWinformType").val(),
                        WHC_Url: $("#txtUrl").val(),
                        WHC_WebIcon: $("#txtWebIcon").val(),
                        WHC_SystemType_ID: $("#txtSystemType_ID").val()
                    }
                    //将值传递给
                    InitGrid(queryData);
                    return false;
                });
            }

![复制代码][copycode.gif]

通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法 **FindWithPager **获取相应的分页数据，并绑定到grid控件中。

**另外，如果需要在grid里面增加一些图片或者链接什么的，应该如何操作呢？**

如下界面所示的效果：

![23102342-e51fe469baa44e00bafa66d86a863614.png][]

首先需要在初始化代码里面增加列的formatter回调函数，如下所示。

![复制代码][copycode.gif]

columns: [[
                        { field: 'ck', checkbox: true },   //选择
                         { title: '显示名称', field: 'Name', width: 200},
                         { title: '图标', field: 'Icon', width: 150 },
                         { title: '排序', field: 'Seq', width: 80 },
                         { title: '功能ID', field: 'FunctionId', width: 80 },
                         {
                             title: '菜单可见', field: 'Visible', width: 80, formatter: function (val, rowdata, index) {
                                 if (val) {
                                     return '<a class="grid_visible" href="javascript:void(0)" >' + val + '</a>';
                                 } else {
                                     return '<a class="grid_unvisible" href="javascript:void(0)" >' + val + '</a>';
                                 }
                             }
                         },
                         { title: 'Winform窗体类型', field: 'WinformType', width: 400 },
                         { title: 'Web界面Url地址', field: 'Url', width: 200 },
                         { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
                         { title: '系统编号', field: 'SystemType_ID', width: 80 }
                    ]],

![复制代码][copycode.gif]

在formatter回调函数里面添加逻辑代码，判断是否可见，其实就是增加两个图片按钮，但是图片按钮的样式设置，必须在加载数据完毕后才能操作，因此需要在函数里面处理。

onLoadSuccess: function () {
                        $(".grid_visible").linkbutton({ text: '可见', plain: true, iconCls: 'icon-ok' });
                        $(".grid_unvisible").linkbutton({ text: '不可见', plain: true, iconCls: 'icon-stop' });
                    },

如果显示的图片不完整，设置行的自动调整高度属性为true即可。

**autoRowHeight: true**

### 10、树形控件 ###

虽然easyui也有Tree控件，不过我较喜欢使用zTree这个树形控件，这个是一个免费的Jquery树控件。

![22163041-1f9ff9ff2d7e40818d0e3cdbc1e67d97.png][]

引用代码如下所示：

初始化在Tree树控件的界面代码如下所示：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 11、布局控件 ###

EasyUI通过DIV层来控制布局的显示，DIV里面增加一个Region的属性用来区分属于哪个区域，如下图是我Web开发框架的界面布局效果图。

![22164311-9f0f0c57b81441cd9bc34e4763031d91.png][]

界面代码如下所示：

![22164357-f370041737594c1e9dce471a2b53eeb8.png][]

我们详细查看主工作区的代码，如下所示。

<div id="mainPanle" region="center" title="" style="overflow:hidden;">
            <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
            </div>
        </div>

其中字典管理里面还有子布局的展示，我们查看字典管理里面界面代码，如下所示。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 12、弹出式对话框 ###

EasyUI弹出式对话框用的很多，对话框的界面代码放在DIV层里面，一般在界面整个界面加载后中已经初始化了，只是我们根据条件相似适当的层即可，这样就形成了弹出式对话框，弹出式对话框有一个遮罩的效果。

![22165231-2cca658e91e143159d94e14d3bc850d9.png][]

界面代码如下所示：

![22165501-982742dbe6dc4eba95420938f5d6267b.png][]

### 13、提示信息 ###

在常规的Web界面提示里面，我们一般用纯粹的javascript的alert函数来进行信息的提示，如果在基于EasyUI的界面布局和演示里面，使用这个提示显然会和界面演示不够匹配，因此我们使用messager类来进行相应的提示信息处理，简单的脚本提示代码如下。

$.messager.alert("提示", "修改成功");

![22170108-321c27d9d62d4870bee10a8741272490.png][]

提示信息也可以更加丰富，添加图标等信息，界面代码如下所示。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

对于一般的删除操作，一般有一个提示确认的消息框，这个messager类也进行了封装处理，效果也不错。

![22170710-24e3b1ef797c4e2d9ffd9ebae26182b2.png][]

界面代码如下所示。

![复制代码][copycode.gif]

$.messager.confirm("删除确认", "您确认删除选定的记录吗？", function (deleteAction) {
                        if (deleteAction) {
                            $.get("/DictData/DeletebyIds", postData, function (data) {
                                if (data == "true") {
                                    $.messager.alert("提示", "删除选定的记录成功");
                                    $("#grid").datagrid("reload");
    
                                    //当删除完成之后，第二次删除的时候还记得上次的信息，这样是不可以的，所以我们需要清除第一次的信息                                
                                    rows.length = "";//第一种方法                                
                                    $("#grid").datagrid("clearSelections");//第二种方法
                                }
                                else {
                                    $.messager.alert("提示", data);
                                }
                            });
                        }
                    });

[22154622-0076dcd508ba4355840ff1905c1442f5.png]: /images/20220606/298511a14f5443c1974ce7be810758b1.png
[22154825-2bf2d6b2ed5e4e1ebd29dbe05c991918.png]: /images/20220606/81090308589e4eb8bbf8bc48f1c89b97.png
[copycode.gif]: /images/20220606/562323febe364ecbb05ea9a5aa0c80f8.png
[22154931-3f09390a17fa4558b76586efb1f1ed21.png]: /images/20220606/d79da882c768491a924c724cb266d2d2.png
[22155215-4aecd8e74673446abf03941484516320.png]: /images/20220606/c344413a37794bf2bca3957cc471fb28.png
[22155816-e75b872b4b1e435da5f3fc59dc14772c.png]: /images/20220606/7e0876e098d24f2587f1a0f07c0820ae.png
[22160046-d867a9aa1a2c45be82adc38d5df8bb84.png]: /images/20220606/e6a4a3ef906148089fe905bfebe769b3.png
[22160431-1ac11199b022497eb42699ad857befbc.png]: /images/20220606/7b87929139e04af08aa82a9e3097cda7.png
[22160441-f6320ef46ca64400910532018bba5392.png]: /images/20220606/a98c139edf2f48b7aa8968437b4d3f2d.png
[22161155-4859195ed83d4096adcc74f1db52653c.png]: /images/20220606/68119fb6ccd542cd84caad8c8cfa3691.png
[22161246-d241e97c9815425f9474ffa496a5685b.png]: /images/20220606/deb4408fc6be4135973ae2b96a936269.png
[22161547-eabd4c0fe9cf4cd29319a787483e65d1.png]: /images/20220606/e0635c12f5814c4dae9509ea5e80f2e2.png
[18150941-fcdea5f7b40d436a93b0d1485437efcf.png]: /images/20220606/eadf18fd0ae549f68d1313bf9732e22d.png
[22161826-3d0a0f4e910b40b286d1455ef2650a64.png]: /images/20220606/a6928e305a6a456aaf04b86ebbad5b36.png
[22162010-b6f901dcd14a49a4ba379dd01d698ec6.png]: /images/20220606/306f9f30341e43d5980295ca9e32f509.png
[22162745-bb551bedf44a40ceb9f5810a8cf5b4ce.png]: /images/20220606/928cfa8b7c524d8a9f0f24fb11125597.png
[23102342-e51fe469baa44e00bafa66d86a863614.png]: /images/20220606/fc9a14ccb616454ca406e4684d8c4d2b.png
[22163041-1f9ff9ff2d7e40818d0e3cdbc1e67d97.png]: /images/20220606/906769b76966427ebbadbe92833947e1.png
[22164311-9f0f0c57b81441cd9bc34e4763031d91.png]: /images/20220606/d682cf06abea4b2d8acdb23c86d8001f.png
[22164357-f370041737594c1e9dce471a2b53eeb8.png]: /images/20220606/92655a6d0d034a96a96c764aea78d418.png
[22165231-2cca658e91e143159d94e14d3bc850d9.png]: /images/20220606/fc6752565ef349249deeea9ce7fdf9ad.png
[22165501-982742dbe6dc4eba95420938f5d6267b.png]: /images/20220606/ff852d76ef2f42868061e3d31f328712.png
[22170108-321c27d9d62d4870bee10a8741272490.png]: /images/20220606/7b7ffce1c6af41f1816a5d3eaad04122.png
[22170710-24e3b1ef797c4e2d9ffd9ebae26182b2.png]: /images/20220606/1ebb783558504007b910e6c07fd1bf7a.png