在前面介紹了兩篇關於我的基於MVC4+EasyUI技術的Web開發框架的隨筆，本篇繼續介紹其中介面部分的一些使用知識，包括控制元件的賦值、取值、清空，以及相關的使用。

我們知道，一般Web介面包括的介面控制元件有：單行文字框、多行文字框、密碼文字框、下拉列表Combobox、日期輸入控制元件、數值輸入控制元件、單項選擇、複選框、表格控制元件DataGrid、樹形控制元件、佈局控制元件、彈出式對話方塊、提示資訊、列表控制元件等，這些介面控制元件的操作都有哪些不同，下面我們來逐一進行介紹。

1、單行文字框

使用easyui的控制元件，單行文字可以使用easyui-validatebox樣式即可，型別為text的控制元件。

介面程式碼如下所示：

<input class="easyui-validatebox" type="text" id="Name" name="Name" />
或者
<input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"  />

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

如果是標籤Lable控制元件，這需要把val 使用text替代即可，如下程式碼所示：

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

 對於easyui-validatebox樣式的控制元件，一般來說，有幾個常見屬性可以設定他們的。

//必輸項：
 <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]'">

2、多行文字框

easyui的介面樣式，可以使用easyui-validatebox，或者預設的textarea即可。

介面程式碼如下所示：

<textarea id="type_Remark" class="easyui-validatebox" required="true" style="height:100px;"></textarea>

或者

<textarea style="height:60px;width:200px" id="type_Remark" name="Remark"></textarea>

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

3、密碼文字框

密碼文字框和常規的文字框一樣，只是輸入字元的時候，系統做了遮蔽顯示而已，把它作為一個來獨立說明，也是因為它也是常見輸入的一種。

介面程式碼如下所示：

 <input type="password" name="password" style="width:260px;"></input>

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

4、下拉列表Combobox

常見的EasyUI的ComboBox是可以輸入，也可以從列表選擇的內容的輸入控制元件。

介面程式碼如下所示：

<input class="easyui-combobox" type="text" id="type_PID1" name="PID" />

繫結下拉列表的資料來源程式碼如下：

            $('#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控制元件的介面程式碼如下：

<select id="txtPID" style="width: 100%" > </select>

5、日期輸入控制元件

easyui使用class=‘easyui-datebox’來標識日期控制元件，從彈出的層中選擇正確的日期，是一種非常常見的介面輸入控制元件，可以替代My97DatePicker日期輸入控制元件。

彈出窗體介面效果如下。

它的介面程式碼如下所示：

<input class="easyui-datebox" type="text" ID="txtLastUpdated" name="txtLastUpdated" style="width:100px"  />

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

6、數值輸入控制元件

easyui使用樣式easyui-numberbox標識為數值型別，其表現為文字框，但只能輸入數值。

介面程式碼如下所示：

<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">

或者使用‘easyui-numberspinner’樣式來標識，可以上下調節數值。

<input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>

賦值給介面控制元件程式碼如下：

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

或者

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

獲取介面控制元件的值程式碼如下：

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

 或者

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

7、單項選擇Radio控制元件

單項選擇Radio控制元件，是在多項內容裡面選擇一個選項進行儲存或者顯示。

介面程式碼如下所示：

                    <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>

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

或者使用Comobo控制元件作為單項選擇的控制元件也是可以的，介面效果如下所示。

其介面程式碼如下所示：

    <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>

8、複選框

複選框是在一項或多項內容中，選擇零項或者多項的一個輸入介面控制元件。

介面程式碼如下所示：

<input id="chkIsExpire" type="checkbox" >帳號過期

由於複選框的一些特殊性質，在表單提交的時候，如果沒有勾選的選型，使用serializeArray()方法構造的資料，複選框的值則不會被提交。

基於這個原因，我們可以使用Select控制元件進行替代，實現複選項的功能，而不影響

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

以上程式碼的使用。

使用Select控制元件的程式碼如下所示。

<select  id="Visible1" name="Visible">
          <option value="true" selected>正常</option>
          <option value="false">不可見</option>
 </select>

賦值給介面控制元件程式碼如下：

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

獲取介面控制元件的值程式碼如下：

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

9、表格控制元件DataGrid

easyui的列表控制元件，可以通過指定table的class屬性為easyui-datagrid即可實現表格的定義，介面程式碼如下所示：

<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>

不過為了避免使用指令碼定義datagrid導致多次初始化的問題，我們一般只需要指定一個table程式碼即可，介面如下所示

            <table id="grid" style="width: 1024px" title="使用者操作" iconcls="icon-view">            
            </table>

而表格控制元件的資料載入，我們使用javascript進行初始化，初始化後的表格介面顯示效果如下所示。

Javascript程式碼如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用來實現寬度自適應的一個操作。

        //實現對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();
                }
            })
        };

對於查詢按鈕觸發的資料後臺查詢及資料繫結操作，javascript程式碼如下所示：

        //繫結查詢按鈕的的點選事件
        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;
            });
        }

通過構造一些查詢引數並傳遞相應的值，後臺根據這些引數，從對應控制器的分頁方法 FindWithPager 獲取相應的分頁資料，並繫結到grid控制元件中。

另外，如果需要在grid裡面增加一些圖片或者連結什麼的，應該如何操作呢？

如下介面所示的效果：

首先需要在初始化程式碼裡面增加列的formatter回撥函式，如下所示。

                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 }
                ]],

在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樹控制元件。

引用程式碼如下所示：

    <link href="~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>

初始化在Tree樹控制元件的介面程式碼如下所示：

    <script type="text/javascript">
     <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick,
                onDblClick: onDblClick
            }
        }

        //重新載入樹形結構（非同步）
        function reloadTree() {
            $("#loading").show();

            $.getJSON("/DictType/GetTreeJson?r=" + Math.random(), function (json) {
                $.fn.zTree.init($("#treeDemo"), setting, json);
                $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);

                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var treeNodes = treeObj.getNodes();
                if (treeNodes != null) {
                    loadTypeData(treeNodes[0].id);
                }
            });
            $("#loading").fadeOut(500);
        }

        //樹單擊節點操作
        function onClick(event, treeId, treeNode, clickFlag) {
            var id = treeNode.id;
            loadTypeData(id);
        }
        //樹雙擊節點操作
        function onDblClick(event, treeId, treeNode) {
            var id = treeNode.id;
            loadTypeData(id);
            ShowDictType('edit');
        }

11、佈局控制元件

EasyUI通過DIV層來控制佈局的顯示，DIV裡面增加一個Region的屬性用來區分屬於哪個區域，如下圖是我Web開發框架的介面佈局效果圖。

介面程式碼如下所示：

我們詳細檢視主工作區的程式碼，如下所示。

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

 其中字典管理裡面還有子佈局的展示，我們檢視字典管理裡面介面程式碼，如下所示。

    <div class="easyui-layout" style="width:700px;height:700px;" fit="true">
        <div data-options="region:'west',split:true,title:'字典類別',iconCls:'icon-book'" style="width: 300px; padding: 1px;">
            <div style="padding: 1px; border: 1px solid #ddd;">                
                .......................</div>
            <div>
                <ul id="treeDemo" class="ztree">
                </ul>
            </div>
        </div>
        <div id="tb" data-options="region:'center',title:'字典資料',iconCls:'icon-book'" style="padding:5px;height:auto">                
            <!-------------------------------詳細資訊展示表格----------------------------------->
            <table id="grid" style="width: 940px" title="使用者操作" iconcls="icon-view"></table>
        </div>
    </div>

12、彈出式對話方塊

EasyUI彈出式對話方塊用的很多，對話方塊的介面程式碼放在DIV層裡面，一般在介面整個介面載入後中已經初始化了，只是我們根據條件相似適當的層即可，這樣就形成了彈出式對話方塊，彈出式對話方塊有一個遮罩的效果。

介面程式碼如下所示：

13、提示資訊

在常規的Web介面提示裡面，我們一般用純粹的javascript的alert函式來進行資訊的提示，如果在基於EasyUI的介面佈局和演示裡面，使用這個提示顯然會和介面演示不夠匹配，因此我們使用messager類來進行相應的提示資訊處理，簡單的指令碼提示程式碼如下。

$.messager.ale