Question

easyui datagrid 如何嵌入以toolbar形式的搜索功能求答案

Answer 1

首先：看下功能截图 二.在看页面加载datagrid代码： //组grid创建 function groupgrid(url){ $('#leftGroupGrid').datagrid({ title:'字典表分组', iconCls:'icon-ok', singleSelect:true, fitColumns: true, nowrap:false, striped: true, collapsible:true, url:url, loadMsg:'请稍候,系统正在处理请求...', dataType: 'json', pagination:true, rownumbers:true, remoteSort:false, columns:[[ {field:'groupname',title:'组名',width:$('#leftGroupGrid').width()*0.3,sortable:true,editor:'text'}, {field:'remark',title:'描述',width:$('#leftGroupGrid').width()*0.2,sortable:true,editor:'text'}, {field:'type',title:'数据类型',width:$('#leftGroupGrid').width()*0.175, editor:{ type:'combobox', options:{valueField:'id',textField:'name',data:typepram,required:true} }}, {field:'dicDicType',title:'字典表分类',width:$('#leftGroupGrid').width()*0.175, editor:{ type:'combobox', options:{valueField:'id',textField:'name',data:dicdictypepram,required:true} }}, {field:'action',title:'操作',width:$('#leftGroupGrid').width()*0.15,align:'center', formatter:function(value,row,index){ if (row.editing){ var s = '<a href="#" onclick="saveGroupRow('+index+')"><img src="${ctx}/resources/jquery-easyui-1.2.5/themes/icons/filesave.png" width="16" height="16" border="0" alt="保存"></a> '; var c = '<a href="#" onclick="cancelGrouprow('+index+')"><img src="${ctx}/resources/jquery-easyui-1.2.5/themes/icons/redo.png" width="16" height="16" border="0" alt="撤销"></a> '; return s+c; } else { return '--'; } } } ]], onBeforeLoad:function(){ $('leftGroupGrid').datagrid('rejectChanges'); $('#lbtnadd').linkbutton('enable'); }, //双击行事件（根据组名查询组中的值信息） onDblClickRow:function(rowIndex,rowData){group = rowData.groupname;$(document).ready(function(){rightItemGrid();});}, //用户开始编辑一行时触发 onBeforeEdit:function(index,row){row.editing = true;$('#leftGroupGrid').datagrid('refreshRow',index);}, //当用户完成编辑一行时触发 onAfterEdit:function(index,row,changes){saveGroupRow(index,row,changes);row.editing = false;$('#leftGroupGrid').datagrid('refreshRow',index);}, //当用户取消编辑一行时触发 onCancelEdit:function(index,row){row.editing = false;$('#leftGroupGrid').datagrid('rejectChanges');} }); //设置分页控件 $('#leftGroupGrid').datagrid('getPager').pagination({ pageSize: 10,//每页显示的记录条数，默认为10 pageList: [5,10,15],//可以设置每页记录条数的列表 beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', }); } 三.定义的html代码： <!-- start 列表区 --> <div class="divgrid"> <table border="0" cellspacing="5px"> <tr> <td valign="top"><table id="leftGroupGrid" toolbar="#search"></table></td> <td valign="top"><table id="rightItemGrid"></table></td> </tr> </table> </div> <!-- end 列表区 --> <!-- start搜索框 --> <div id="search" style="padding-top: 3px;"> <a href="javascript:void(0)" id="lbtnadd" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="insertGroupRow();">增加</a> 组名<input type="text" id="txtGroupName" value="${groupname}" style="width:80px"></input> 描述<input type="text" id="txtRemark" value="${remark}" style="width:80px"></input> 类型<select id="txtType" > <ef:option groupname="DicType" selectedValue="${type}" link="true" flag="true"></ef:option> </select> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="selectItemValue();">查询</a> </div> <!-- end搜索框 --> 四.代码贴上了，解释下：1.定义了一个<td valign="top"><table id="leftGroupGrid" toolbar="#search"></table></td>的table专门放json数据；2.在table里引用toolbar="#search“，即将定义好的<div id="search" style="padding-top: 3px;"></div>的内容以toolbar的形式嵌入到了上述table里；3.注意toolbar是等于div里的#id。