在使用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;
200px;">
<input id="searchbox" class="easyui-searchbox" searcher="searcherFun" prompt="请输入查询内容"
style=" 200px; margin-top: 10px; padding-top: 10px;"></input>
<div id="mm" style=" 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', 80, hidden: false },
{ title: 'pSpace', field: 'PspaceName', table: 'Dev_pSpace', column: 'Name', 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=" 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=" 100%;">
<tr>
<td style=" 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;
200px;">
<input id="searchbox" class="easyui-searchbox" searcher="searcherFun" prompt="请输入查询内容"
style=" 200px; margin-top: 10px; padding-top: 10px;"></input>
<div id="mm" style=" 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; 300px;">
</div>--%>
</td>
</tr>
</table>
</div>