jQuery EasyUI使用教程之在数据网格中添加搜索功能

2019独角兽企业重金招聘Python工程师标准>>>

<jQuery EasyUI最新版下载>

在本教程中，我们将向你展示如何从数据库中获取数据，并将其显示到数据网格中，然后演示如何根据用户输入的搜索关键字搜索显示结果。

查看演示

创建数据网格

创建具有分页功能的数据网格，然后将工具栏添加到其中。

< table id = "tt" class = "easyui-datagrid" style = "width:600px;height:250px" url = "datagrid24_getdata.php" toolbar = "#tb" title = "Load Data" iconcls = "icon-save" rownumbers = "true" pagination = "true" >

< thead >

< tr >

< 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 >

</ tr >

</ thead >

</ table >

工具栏定义为：

< div id = "tb" style = "padding:3px" >

< span >Item ID:</ span >

< input id = "itemid" style = "line-height:26px;border:1px solid #ccc" >

< span >Product ID:</ span >

< input id = "productid" style = "line-height:26px;border:1px solid #ccc" >

< a href = "#" class = "easyui-linkbutton" plain = "true" onclick = "doSearch()" >Search</ a >

</ div >

当用户输入搜索值并点击搜索按钮时，“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)*$rows;

$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" ] = $items;

echo json_encode($result);

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章！

转载于:https://my.oschina.net/u/2317468/blog/545970

jQuery EasyUI使用教程之在数据网格中添加搜索功能相关推荐

jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用
2019独角兽企业重金招聘Python工程师标准>>> 当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息.此功 ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能
easyui的combobox根据后台数据实现自动输入提示功能发布时间:2020-06-11 10:09:41 来源:51CTO 阅读:1981 作者:crackernet adauhuehkek最 ...
hazelcast配置内存_在内存数据网格中引入hazelcast imdg
hazelcast配置内存 Today's article will be oriented to a very specific concept, which is the In-Memory Da ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
历史数据导出excel_在数据产品中对导出功能的思考
本篇文章:3993字预计阅读:11分钟前段时间,产品内上线了一个新的统计模块,出于上线时间的考虑,第一期没有提供"导出"功能,上线后不久就有用户向我反馈需求,产生了如下对话用 ...
python解决数据框中添加一行或者一列(DataFrame的行列处理)
1.解决数据框中添加一行(给定值) ###原数据框data_Peak_2 = pd.DataFrame({"Peak_density": np.ndarray.tolist(hma ...
mysql删除表中的一列数据_在数据表中添加或删除一列
注意: 我们希望能够尽快以你的语言为你提供最新的帮助内容. 本页面是自动翻译的,可能包含语法错误或不准确之处. 我们的目的是使此内容能对你有所帮助. 可以在本页面底部告诉我们此信息是否对你有帮助吗? ...

jQuery EasyUI使用教程之在数据网格中添加搜索功能

创建数据网格

jQuery EasyUI使用教程之在数据网格中添加搜索功能相关推荐

最新文章

热门文章