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>