easyui datagrid 工具列實現方式

在使用datagrid時，工具列有時需要動態控制或添加一些自訂的內容進去，這裡把用到的總結一下。

第一種：先定義，後追加

前四個按鈕使用datagrid的屬性方式添加：

     toolbar: [                { text: '增加', iconCls: 'icon-add', handler: function () { deviceInfoAddClick(); } },                { text: '修改', iconCls: 'icon-edit', handler: function () { deviceInfoEditClick(); } },                { text: '刪除', iconCls: 'icon-remove', handler: function () { deviceInfoDeleteClick(); } },                { text: '查看', handler: function () { } }, '-',                { text: '重新整理', iconCls: 'icon-reload', handler: function () { deviceInfoRefreshClick(); } },                { text: '匯出', iconCls: 'icon-save', handler: function () { $(dg).treegrid('reload'); } }, '-'],

最後面的那個搜尋方塊就不能這麼簡單的添加進去了。需要先在前台定義好：

    <%--下拉搜尋方塊--%>    <div id="searchboxWrapper" style="display: inline-block; padding-top: 3px; text-align: right;        width: 200px;">           <input id="searchbox" class="easyui-searchbox" searcher="searcherFun" prompt="請輸入查詢內容"            style="width: 200px; margin-top: 10px; padding-top: 10px;"></input>        <div id="mm" style="width: 100px">        </div>    </div>

在datagrid初始化之後，初始化下拉搜尋方塊並追加到原來的工具列後面。

    $(function () {            initDatagrid();            initSearchbox();            });

        function initSearchbox() {            /// <summary>初始化下拉搜尋方塊</summary>            //迴圈列名，產生搜尋的下拉式清單            var fields = $(dg).datagrid('getColumnFields');            var muit = "";            for (var i = 0; i < fields.length; i++) {                var opts = $(dg).datagrid('getColumnOption', fields[i]);                if (opts.table) {                    muit += "<div name='" + opts.table + "." + opts.column + "'>" + opts.title + "</div>";                } else {                    muit += "<div name='" + fields[i] + "'>" + opts.title + "</div>";                }            };            $('#mm').html($('#mm').html() + muit);            $('#searchbox').searchbox({                menu: '#mm'            });            //將產生好的搜尋方塊放入工具列            $(".datagrid-toolbar").append($("#searchboxWrapper"));        }

首先迴圈列名填充下拉搜尋方塊，然後執行個體化，最後追加到工具列後面。 因為有些資料是通過多表聯集查詢得出來的資料，這樣在使用下拉框定義搜尋條件時必須指定好要查詢的表名和列名，我這裡使用table和column兩個屬性指定

         { title: 'SmartIO', field: 'SmartIoName', table: 'Dev_SmartIO', column: 'Name', width: 80, hidden: false },                    { title: 'pSpace', field: 'PspaceName', table: 'Dev_pSpace', column: 'Name', width: 80, hidden: false },

後台使用IBatis查詢資料，其中有個方法是直接傳入where語句

    <select id="FindAllBySearchKey" resultMap="ResultMap"  parameterClass="string"   >      SELECT *,Dev_SmartIO.Name as SmartIoName,Dev_pSpace.Name as PspaceName,Dev_Teamplate.Name as DevTeamplateName      FROM [dbo].[Dev_DeviceInfo]  left join dbo.Dev_SmartIO  on [Dev_DeviceInfo].SmartIoID=Dev_SmartIO.ID  left join dbo.Dev_pSpace  on [Dev_DeviceInfo].PspaceID=Dev_pSpace.ID  left join dbo.Dev_Teamplate  on [Dev_DeviceInfo].DevTeamplateID=Dev_Teamplate.ID      where $value$ and  [IsDeleted] =0    </select>

在表聯合時我沒有使用別名，所以在where條件裡也是直接使用原表名.列名既可。 這就與前端產生的過濾欄位一致了。
點擊搜尋按鈕會執行 searcherFun 方法。

      function searcherFun(value, name) {            /// <summary>搜尋列表</summary>            loadData(name, value)        }

   function loadData(searchKey, searchValue) {            /// <summary>載入資料</summary>            var url = 'http://www.cnblogs.com/AjaxHandler/DevDeviceInfoHandler.ashx?action=DeviceInfoList&tmp=' + Math.random().toString();            if (searchKey != null)                url += "&searchKey" + searchKey + "$searchValue" + searchValue;            $(dg).datagrid('options').url = url;        }

設定完url後就會自動去後台載入資料，並把當前的分頁資訊也帶過去。

    /// <summary>    /// 裝置列表    /// </summary>    public bool DeviceInfoList()    {        EasyUI_datagrid grid = new EasyUI_datagrid();        try        {            string searchKey = this.Context.Request["searchKey"];            string searchValue = this.Context.Request["searchValue"];            string page = Context.Request["page"];            string rows = Context.Request["rows"];            List<Dev_DeviceInfo> list = DevService.GetInstance().FindAllDeviceInfoList(searchKey, searchValue, page, rows) as List<Dev_DeviceInfo>;            grid.total = DevService.GetInstance().GetCountDeviceInfoList(searchKey, searchValue);            list.ForEach(q => grid.AddRows(q));            grid.success = true;            return true;        }        catch (Exception ex)        {            grid.success = false;            grid.msg = ex.Message;            return false;        }        finally        {            this.Context.Response.Write(JsonConvert.SerializeObject(grid));        }    }

這裡需要注意的是返回的資料需要是datagrid需要的格式，即有total和rows兩個屬性。扯遠了，把資料的來龍去脈都寫了，呵呵。
第二種：直接在前台定義div，使用toolbar屬性指向

工具列需要使用下拉式功能表，預設也不好弄，所以這裡使用html代碼定義好。

     <%--測點工具列--%>                    <div id="pointDatagridToolbar">                        <a href="javascript:void(0)" id="Add">添加</a> <a href="javascript:void(0)" id="Edit"                            onclick="TagEditClick()">修改</a><a href="javascript:void(0)" id="Del" onclick="TagDeleteClick()">刪除</a>                        <div id="AddMenu" style="width: 100px;">                            <div onclick="TagAddClick('MNL')">                                類比量</div>                            <div onclick="TagAddClick('KGL')">                                開關量</div>                            <div onclick="TagAddClick('ZFCL')">                                字串量</div>                        </div>                    </div>

//初始化菜單function InitMenubutton() {    $('#Add').menubutton({        menu: '#AddMenu',        iconCls: 'icon-add',        plain: true    });    $('#Edit').linkbutton({        iconCls: 'icon-edit',        plain: true    });    $('#Del').linkbutton({        iconCls: 'icon-remove',        plain: true    });}

       toolbar: "#pointDatagridToolbar",

這種方式最靈活了，排版布局方便。使用這個還走過一個彎路，就是頂一個一個兩行的table，第一行放工具列，第二行行datagrid，看起來也很像是一體的。

 

最後一個按鈕靠右對齊，使用了table布局方式，div的我搞不出來。

 <%--工具列--%>    <div id="dev_deviceInfo_toolbar" class="datagrid-toolbar">        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">            <tr>                <td style="width: 700px;">                    <%--正常的裝置列表--%>                    <div id="normal">                        <div style="float: left; padding: 0px; height: auto">                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"                                onclick="deviceInfoAddClick();">增加</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"                                    onclick="deviceInfoEditClick();">修改</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"                                        onclick="deviceInfoDeleteClick();">刪除</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"                                            onclick="deviceInfoDirectDeleteClick();">徹底刪除</a>                        </div>                        <%--分割線--%>                        <div id="separator" style="float: left;" class="datagrid-btn-separator">                        </div>                        <div style="float: left; padding: 0px; height: auto">                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"                                onclick="deviceInfoViewClick();">查看</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"                                    onclick="deviceInfoRefreshClick();">重新整理</a>                        </div>                        <div id="Div1" style="float: left;" class="datagrid-btn-separator">                        </div>                        <%--下拉搜尋方塊--%>                        <div id="searchboxWrapper" style="display: inline-block; padding-top: 3px; text-align: left;                            width: 200px;">                            <input id="searchbox" class="easyui-searchbox" searcher="searcherFun" prompt="請輸入查詢內容"                                style="width: 200px; margin-top: 10px; padding-top: 10px;"></input>                            <div id="mm" style="width: 100px">                            </div>                        </div>                    </div>                    <%--已刪除的裝置--%>                    <div id="deleted" style="display: none;">                        <div style="float: left; padding: 0px; height: auto">                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"                                onclick="deviceInfoDirectDeleteClick();">徹底刪除</a><a href="#" class="easyui-linkbutton"                                    data-options="iconCls:'icon-remove',plain:true" onclick="deviceInfoViewClick();">查看</a><a                                        href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back',plain:true"                                        onclick="deviceInfoBackClick();">返回</a>                        </div>                    </div>                </td>                <td style="text-align: right;">                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-hsz-16-16',plain:true"                        onclick="deviceInfoDeletedClick();">資源回收筒</a>                    <%--      <div style="display: inline-block; padding-top: 3px; text-align: right; width: 300px;">                                           </div>--%>                </td>            </tr>        </table>    </div>