2881人阅读
easyui（1）
怎样在easyui内嵌入搜索框，本人查看了好多资料，以及easyui文档，有如下体会，希望能给大家带来帮助！
首先：看下功能截图
二.在看页面加载datagrid代码：
//组grid创建
function groupgrid(url){
$('#leftGroupGrid').datagrid({
title:'字典表分组',
iconCls:'icon-ok',
singleSelect:true,
fitColumns: true,
nowrap:false,
striped: true,
collapsible:true,
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,
type:'combobox',
options:{valueField:'id',textField:'name',data:typepram,required:true}
{field:'dicDicType',title:'字典表分类',width:$('#leftGroupGrid').width()*0.175,
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;
return '--';
onBeforeLoad:function(){
$('leftGroupGrid').datagrid('rejectChanges');
$('#lbtnadd').linkbutton('enable');
//双击行事件（根据组名查询组中的值信息）
onDblClickRow:function(rowIndex,rowData){group = rowData.$(document).ready(function(){rightItemGrid();});},
//用户开始编辑一行时触发
onBeforeEdit:function(index,row){row.editing =$('#leftGroupGrid').datagrid('refreshRow',index);},
//当用户完成编辑一行时触发
onAfterEdit:function(index,row,changes){saveGroupRow(index,row,changes);row.editing =$('#leftGroupGrid').datagrid('refreshRow',index);},
//当用户取消编辑一行时触发
onCancelEdit:function(index,row){row.editing =$('#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&&
&td valign=&top&&&table id=&leftGroupGrid& toolbar=&#search&&&/table&&/td&
&td valign=&top&&&table id=&rightItemGrid&&&/table&&/td&
列表区 --&
&!-- start搜索框 --&
&div id=&search& style=&padding-top: 3&&
&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&
&a href=&javascript:void(0)& class=&easyui-linkbutton& iconCls=&icon-search& plain=&true& onclick=&selectItemValue();&&查询&/a&
&!-- end搜索框 --&
四.代码贴上了，解释下：
1.定义了一个&td valign=&top&&&table id=&leftGroupGrid& toolbar=&#search&&&/table&&/td&的table专门放json数据；
2.在table里引用toolbar=&#search“，即将定义好的&div id=&search& style=&padding-top: 3&&&/div&的内容以toolbar的形式嵌入到了上述table里；
3.注意toolbar是等于div里的#id。
4.不要再js在重新定义一个toolbar，否则html里的div内容就不会被嵌入进去。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6105次
排名：千里之外给easyui datagrid添加搜索栏 - 推酷
给easyui datagrid添加搜索栏
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&Basic DataGrid - jQuery EasyUI Demo&/title&
&link rel=&stylesheet& type=&text/css& href=&../../themes/default/easyui.css&&
&link rel=&stylesheet& type=&text/css& href=&../../themes/icon.css&&
&link rel=&stylesheet& type=&text/css& href=&../demo.css&&
&script type=&text/javascript& src=&../../jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript& src=&../../jquery.easyui.min.js&&&/script&
&div class=&easyui-panel& title=&DataGrid with searching box& icon=&icon-save& style=&width:680height:420& collapsible=&true& minimizable=&true& maximizable=true closable=&true&&
&div class=&easyui-layout& fit=&true&&
&div region=&north& border=&false& style=&border-bottom:1px solid #height:32padding:2px 5background:#&&
&div style=&float:&&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-add&&新增&/a&
&div class=&datagrid-btn-separator&&&/div&
&div style=&float:&&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-save&&编辑&/a&
&div class=&datagrid-btn-separator&&&/div&
&div style=&float:&&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-remove&&删除&/a&
&div style=&float:&&
&input class=&easyui-searchbox& data-options=&prompt:'Please Input Value',searcher:''& style=&width:130vertical-align:&&&/input&
&a href=&#& class=&easyui-linkbutton& plain=&true&&高级检索&/a&
&div region=&center& border=&false&&
&table id=&tt&&&/table&
$('#tt').datagrid({
border:false,
url:'../datagrid/datagrid_data1.json',
idField:'code',
columns:[[
{field:'itemid',width:80,title:'Item ID'},
{field:'productid',width:100,title:'Product'},
{field:'listprice',width:80,align:'right',title:'List Price'},
{field:'unitcost',width:80,align:'right',title:'Unit Cost'},
{field:'attr1',width:240,title:'Attribute'},
{field:'status',width:60,align:'center',title:'Status'}
pagination:true,
rownumbers:true
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8& /&
&title&Basic DataGrid - jQuery EasyUI Demo&/title&
&link rel=&stylesheet& type=&text/css& href=&../../themes/default/easyui.css&&
&link rel=&stylesheet& type=&text/css& href=&../../themes/icon.css&&
&link rel=&stylesheet& type=&text/css& href=&../demo.css&&
&script type=&text/javascript& src=&../../jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript& src=&../../jquery.easyui.min.js&&&/script&
&table class=&easyui-datagrid& style=&width:600height:250px&
url=&../datagrid/datagrid_data1.json&
title=&DataGrid - Complex Toolbar& toolbar=&#tb&
singleSelect=&true& fitColumns=&true&&
&th field=&itemid& width=&60&&ID&/th&
&th field=&productid& width=&80&&Product ID&/th&
&th field=&listprice& align=&right& width=&70&&List Price&/th&
&th field=&unitcost& align=&right& width=&70&&Unit Cost&/th&
&th field=&attr1& width=&200&&地址&/th&
&th field=&status& width=&50&&状态&/th&
&div id=&tb&&
&div region=&north& border=&false& style=&border-bottom:1px solid #height:28padding:2px 2px 2px 2background:#&&
&div style=&float:&&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-add&&新增&/a&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-save&&编辑&/a&
&a href=&#& class=&easyui-linkbutton& plain=&true& icon=&icon-remove&&删除&/a&
&div class=&datagrid-btn-separator&&&/div&
&div style=&float:&&
&input class=&easyui-searchbox& data-options=&prompt:'Please Input Value',searcher:''& style=&width:130vertical-align:&&&/input&
&a href=&#& class=&easyui-linkbutton& plain=&true& &高级检索&/a&
{&total&:28,&rows&:[
{&productid&:&FI-SW-01&,&productname&:&Koi&,&unitcost&:10.00,&status&:&P&,&listprice&:36.50,&attr1&:&Large&,&itemid&:&EST-1&},
{&productid&:&K9-DL-01&,&productname&:&Dalmation&,&unitcost&:12.00,&status&:&P&,&listprice&:18.50,&attr1&:&Spotted Adult Female&,&itemid&:&EST-10&},
{&productid&:&RP-SN-01&,&productname&:&Rattlesnake&,&unitcost&:12.00,&status&:&P&,&listprice&:38.50,&attr1&:&Venomless&,&itemid&:&EST-11&},
{&productid&:&RP-SN-01&,&productname&:&Rattlesnake&,&unitcost&:12.00,&status&:&P&,&listprice&:26.50,&attr1&:&Rattleless&,&itemid&:&EST-12&},
{&productid&:&RP-LI-02&,&productname&:&Iguana&,&unitcost&:12.00,&status&:&P&,&listprice&:35.50,&attr1&:&Green Adult&,&itemid&:&EST-13&},
{&productid&:&FL-DSH-01&,&productname&:&Manx&,&unitcost&:12.00,&status&:&P&,&listprice&:158.50,&attr1&:&Tailless&,&itemid&:&EST-14&},
{&productid&:&FL-DSH-01&,&productname&:&Manx&,&unitcost&:12.00,&status&:&P&,&listprice&:83.50,&attr1&:&With tail&,&itemid&:&EST-15&},
{&productid&:&FL-DLH-02&,&productname&:&Persian&,&unitcost&:12.00,&status&:&P&,&listprice&:23.50,&attr1&:&Adult Female&,&itemid&:&EST-16&},
{&productid&:&FL-DLH-02&,&productname&:&Persian&,&unitcost&:12.00,&status&:&P&,&listprice&:89.50,&attr1&:&Adult Male&,&itemid&:&EST-17&},
{&productid&:&AV-CB-01&,&productname&:&Amazon Parrot&,&unitcost&:92.00,&status&:&P&,&listprice&:63.50,&attr1&:&Adult Male&,&itemid&:&EST-18&}
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致本教程中的示例说明了如何将工具栏添加到数据网格中，您可以在数据网格顶部的工具栏上放置按钮。
创建数据网格
class=&easyui-datagrid&
style=&width:600height:250px&
url=&data/datagrid_data.json&
title=&DataGrid
with Toolbar&
iconcls=&icon-save&
toolbar=&#tb&&
field=&itemid&
width=&80&&Item
field=&productid&
width=&80&&Product
field=&listprice&
width=&80&
align=&right&&List
Price&/th&
field=&unitcost&
width=&80&
align=&right&&Unit
field=&attr1&
width=&150&&Attribute&/th&
field=&status&
width=&60&
align=&center&&Stauts&/th&
class=&easyui-linkbutton&
iconcls=&icon-add&
plain=&true&
onclick=&javascript:alert('Add')&&Add&/a&
class=&easyui-linkbutton&
iconcls=&icon-cut&
plain=&true&
onclick=&javascript:alert('Cut')&&Cut&/a&
class=&easyui-linkbutton&
iconcls=&icon-save&
plain=&true&
onclick=&javascript:alert('Save')&&Save&/a&
您不需要编写任何JavaScript代码，只需通过“toolbar”属性添加工具栏到数据网格中即可。
下载该EasyUI示例：
有兴趣的朋友可以
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：79955次
积分：4256
积分：4256
排名：第5466名
原创：57篇
转载：34篇
译文：293篇
(10)(15)(17)(23)(20)(20)(11)(19)(22)(15)(19)(22)(18)(15)(19)(18)(17)(6)(2)(17)(21)(16)(2)(26)jQuery EasyUI 教程
jQuery EasyUI 数据网格 - 添加查询功能
本实例演示如何从数据库得到数据，并将它们显示在数据网格（datagrid）中。然后演示如何根据用户输入的搜索关键词搜寻显示结果。
创建数据网格（DataGrid）
创建带有分页功能的数据网格（datagrid），然后添加工具栏到其中。
&table id="tt" class="easyui-datagrid" style="width:600height:250px"
url="datagrid24_getdata.php" toolbar="#tb"
title="Load Data" iconCls="icon-save"
rownumbers="true" pagination="true"&
&th field="itemid" width="80"&Item ID&/th&
&th field="productid" width="80"&Product ID&/th&
&th field="listprice" width="80" align="right"&List Price&/th&
&th field="unitcost" width="80" align="right"&Unit Cost&/th&
&th field="attr1" width="150"&Attribute&/th&
&th field="status" width="60" align="center"&Stauts&/th&
工具栏定义如下：
&div id="tb" style="padding:3px"&
&span&Item ID:&/span&
&input id="itemid" style="line-height:26border:1px solid #ccc"&
&span&Product ID:&/span&
&input id="productid" style="line-height:26border:1px solid #ccc"&
&a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()"&Search&/a&
当用户输入查询值并按下查询按钮时，'doSearch' 函数将被调用：
function doSearch(){
$('#tt').datagrid('load',{
itemid: $('#itemid').val(),
productid: $('#productid').val()
上面的代码调用了 'load' 方法来加载新的数据网格（datagrid）数据。我们需要传递 'itemid' 和 'productid' 参数到服务器。
服务器端代码
include 'conn.php';
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_POST['itemid']) : '';
$productid = isset($_POST['productid']) ? mysql_real_escape_string($_POST['productid']) : '';
$offset = ($page-1)*$
$result = array();
$where = "itemid like '$itemid%' and productid like '$productid%'";
$rs = mysql_query("select count(*) from item where " . $where);
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
$result["rows"] = $
echo json_encode($result);
下载 jQuery EasyUI 实例
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码