API中提供了一个参数 queryParams：{}
{"sortName":"","sortOrder":"","queryWord":"","queryType":""}
sortName:排序字段，
sortOrder：排序方式：asc|desc
queryWord：查询关键字
queryType：查询字段。
这个queryParams在表个刷新时会自动附带传到服务端。因此服务端需要接收。
在action中定义几个接受参数
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" mce_href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" mce_href="easyui/themes/icon.css"> <mce:script type="text/javascript" src="easyui/jquery-1.4.4.min.js" mce_src="easyui/jquery-1.4.4.min.js"></mce:script> <mce:script type="text/javascript" src="easyui/jquery.easyui.min.js" mce_src="easyui/jquery.easyui.min.js"></mce:script> <mce:script type="text/javascript"><!-- function datagrid(){ noticegird=$('#test').datagrid({ title:'测试', iconCls:'icon-save', width:600, height:350, nowrap: false, striped: true, collapsible:true, url:'list.action', queryParams:{}, sortName: 'code', sortOrder: 'desc', remoteSort: false, idField:'code', frozenColumns:[[ {field:'ck',checkbox:true}, {title:'code',field:'code',width:80,sortable:true} ]], columns:[[ {title:'Base Information',colspan:2}, {field:'opt',title:'Operation',width:100,align:'center', rowspan:2, formatter:function(value,rec){ return '<span style="color:red" mce_style="color:red">Edit Delete</span>'; } } ],[ {field:'writer',title:'姓名',width:120}, //{field:'addr',title:'Address',width:120,rowspan:2,sortable:true, // sorter:function(a,b){ // return (a>b?1:-1); // } //}, {field:'content',title:'说说',width:150,rowspan:2} ]], pagination:true, rownumbers:true, toolbar:[{ id:'btnadd', text:'Add', iconCls:'icon-add', handler:function(){ $('#btnsave').linkbutton('enable'); alert('add'); } },{ id:'btncut', text:'Cut', iconCls:'icon-cut', handler:function(){ $('#btnsave').linkbutton('enable'); alert('cut'); } },'-',{ id:'btnsave', text:'Save', disabled:true, iconCls:'icon-save', handler:function(){ $('#btnsave').linkbutton('disable'); alert('save'); } },{ id : 'btnsearch', text : '搜索', iconCls : 'icon-search', handler :searchData }] }); var p = $('#test').datagrid('getPager'); if (p){ $(p).pagination({ onBeforeRefresh:function(){ alert('before refresh'); } }); } createSearch(); } $(document).ready(function(){ datagrid(); }); function reloadgrid (keyword) { var queryParams = $('#test').datagrid('options').queryParams; queryParams.state = keyword; $('#test').datagrid('options').queryParams=queryParams; $("#test").datagrid('reload'); } //搜索功能 function searchData(){ var keyword = $("#keyword").val(); reloadgrid (keyword); } function createSearch() { $("<div class='datagrid-btn-separator'></div>'").appendTo( ".datagrid-toolbar"); $("<a style="float: left;margin-left:4px;" mce_style="float: left;margin-left:4px;"><span style="position:relative;" mce_style="position:relative;"><input type=/"text/" id='keyword' style='position:absolute;top:4px;' /><span></a>") .appendTo(".datagrid-toolbar"); $("#keyword").bind("blur", function() { if ($("#keyword").val() == "") { $("#keyword").val('请输入关键字 '); } }); $("#keyword").bind("focus", function() { if ($("#keyword").val() == "请输入关键字") { $("#keyword").val(''); } }); } function resize(){ $('#test').datagrid('resize', { width:700, height:400 }); } function getSelected(){ var selected = $('#test').datagrid('getSelected'); if (selected){ alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4); } } function getSelections(){ var ids = []; var rows = $('#test').datagrid('getSelections'); for(var i=0;i<rows.length;i++){ ids.push(rows[i].code); } alert(ids.join(':')); } function clearSelections(){ $('#test').datagrid('clearSelections'); } function selectRow(){ $('#test').datagrid('selectRow',2); } function selectRecord(){ $('#test').datagrid('selectRecord','002'); } function unselectRow(){ $('#test').datagrid('unselectRow',2); } function mergeCells(){ $('#test').datagrid('mergeCells',{ index:2, field:'addr', rowspan:2, colspan:2 }); } // --></mce:script> </head> <body> <h1>DataGrid</h1> <div style="margin-bottom:10px;" mce_style="margin-bottom:10px;"> <a href="#" mce_href="#" οnclick="resize()">resize</a> <a href="#" mce_href="#" οnclick="getSelected()">getSelected</a> <a href="#" mce_href="#" οnclick="getSelections()">getSelections</a> <a href="#" mce_href="#" οnclick="clearSelections()">clearSelections</a> <a href="#" mce_href="#" οnclick="selectRow()">selectRow</a> <a href="#" mce_href="#" οnclick="selectRecord()">selectRecord</a> <a href="#" mce_href="#" οnclick="unselectRow()">unselectRow</a> <a href="#" mce_href="#" οnclick="mergeCells()">mergeCells</a> </div> <table id="test"></table> </body> </html>
action插入几个查询参数就行了
