[转载]Filter ComboGrid – jQuery EasyUI -Mikel

[转载]Filter ComboGrid – jQuery EasyUI

2011年11月8日 分类: 开发笔记, ASP.NET MVC, JavaScript

[转载]Filter ComboGrid – jQuery EasyUI.

The combogrid component has the same functionalities as the combobox component except that the drop down panel is based on a datagrid. The combogrid component can be filtered, paged and some other datagrid capabilities. This tutorial will show you how to filter data records in a combogrid component.

Create ComboGrid

  1. <input id=“cg” style=“width:150px”>
  1. $(‘#cg’).combogrid({
  2. panelWidth:500,
  3. url: ‘form5_getdata.php’,
  4. idField:‘itemid’,
  5. textField:‘productid’,
  6. mode:‘remote’,
  7. fitColumns:true,
  8. columns:[[
  9. {field:‘itemid’,title:‘Item ID’,width:60},
  10. {field:‘productid’,title:‘Product ID’,align:‘right’,width:80},
  11. {field:‘listprice’,title:‘List Price’,align:‘right’,width:60},
  12. {field:‘unitcost’,title:‘Unit Cost’,align:‘right’,width:60},
  13. {field:‘attr1’,title:‘Attribute’,width:150},
  14. {field:‘status’,title:‘Stauts’,align:‘center’,width:60}
  15. ]]
  16. });

The combogrid component should define ‘idField’ and ‘textField’ properties. The ‘idField’ property store the component value and ‘textField’ property display the text message on the input box. The combogrid can filter its records in ‘local’ or ‘remote’ mode. On remote mode the combogrid will post the ‘q’ parameter to remote server when users typeing chars in input box.

The Server Code

form5_getdata.php
  1. $q = isset($_POST[‘q’]) ? strval($_POST[‘q’]) : ;
  2. include ‘conn.php’;
  3. $rs = mySQL_query(“select * from item where itemid like ‘%$q%’ or productid like ‘%$q%'”);
  4. $rows = array();
  5. while($row = mySQL_fetch_assoc($rs)){
  6. $rows[] = $row;
  7. }
  8. echo json_encode($rows);

Download the EasyUI example:




标签: , , , ,
本文的评论功能被关闭了.
备案信息冀ICP 0007948