easyUi jqgrid search
function getGrid() { var selectedRowIndex = 0; $("#tableDiv").empty(); $("#tableDiv").append("<table id='gridTable'></table><div id='gridPager'></div>"); var $gridTable = $('#gridTable'); $gridTable.jqGrid({ url:basePath+"indexexplain/indexexplain/index_explain_data.action", postData:{}, datatype : "json", height: $(document).height()-200, autowidth: true, colModel : [ //jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式..... {label : '指标标识',name : 'INDEX_EXPLAIN_ID',index : 'INDEX_EXPLAIN_ID', hidden: true }, {label : '公交指标名称',name : 'INDEX_NAME',index : 'INDEX_NAME',width : 200,align : 'center',sortable:false}, {label : '公交指标定义',name : 'INDEX_DEFINE',index : 'INDEX_DEFINE',width : 270,align : 'center',sortable:false}, {label : '公交指标单位',name : 'INDEX_UNIT',index : 'INDEX_UNIT',width : 200,align : 'center',sortable:false}, {label : '公交指标计算公式',name : 'INDEX_FORMULA',index : 'INDEX_FORMULA',width : 200,align : 'center',sortable:false}, {label : '年度计算公式',name : 'INDEX_YEARFORMULA',index : 'INDEX_YEARFORMULA',width : 200,align : 'center',sortable:false}, {label : '月度计算公式',name : 'INDEX_MONTHFORMULA',index : 'INDEX_MONTHFORMULA',width : 200,align : 'center',sortable:false} ], viewrecords: true, rowNum: 10, rowList: [5, 10, 20], pager: "#gridPager", sortname: 'age', sortorder: 'asc', rownumbers: true, shrinkToFit: false, gridview: true, async: false, multiselect: false, onSelectRow : function() { selectedRowIndex = $("#" + this.id).getGridParam('selrow'); }, gridComplete : function() { $("#" + this.id).setSelection(selectedRowIndex, false); rowData = $gridTable.jqGrid("getRowData"); var ids = $gridTable.getDataIDs(); jQuery(ids).each(function(index, id) { var data = $gridTable.getRowData(id); if (data.flag == "100") { $('#' + id).find("td").css("color", "YellowGreen"); } }); } }); //查询条件 $("#search_td1 .dropdown-menu li").click(function () { var text = $(this).find('a').html(); var value = $(this).find('a').attr('data-value'); $("#search_td1 .dropdown-text").html(text).attr('data-value', value); }); $("#btn_search").click(function () { reloadGrid(); });
----------------------------------------------------------------------------------------------------
$("#btn_search").click(function () {
var indexName = $("#search_indexName").val();
indexName = encodeURI($.trim(indexName));
var indexCode = $("#search_td1").find('a').attr('data-value');
if(!indexCode){
indexCode = "";
}
//alert(indexCode);
var postJson = {indexName:indexName,indexCode:indexCode};
//传入查询条件参数
$gridTable.jqGrid("setGridParam",{postData:postJson});
//每次提出新的查询都转到第一页
$gridTable.jqGrid("setGridParam",{page:1});
//提交post并刷新表格
$gridTable.jqGrid("setGridParam",{url:url}).trigger("reloadGrid");
});
----------------------------------------------------------------------------------------------------
//查询回车 $('#search_indexName').bind('keypress', function (event) { if (event.keyCode == "13") { $('#btn_search').trigger("click"); } }); } function reloadGrid() { var $gridTable = $("#gridTable"); var url = basePath + 'indexexplain/indexexplain/indexexplain_data.action'; var indexName = $("#search_indexName").val();//获取comboboxde的code值 indexName = encodeURI($.trim(indexName)); var indexCode = $("#search_td1").find('a').attr('data-value'); if(!indexCode){ indexCode = ""; } var postJson = {indexName:indexName,indexCode:indexCode}; //传入查询条件参数 $gridTable.jqGrid("setGridParam",{postData:postJson}); //每次提出新的查询都转到第一页 $gridTable.jqGrid("setGridParam",{page:1}); //提交post并刷新表格 $gridTable.jqGrid("setGridParam",{url:url}).trigger("reloadGrid"); }
<div class="title-search"> <table> <tr> <td id="search_td1"> <div id="search_div" class="btn-group"> <a class="btn btn-default dropdown-text" data-toggle="dropdown">查询条件</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret" style="margin-top: 5px;"></span></a> <ul class="dropdown-menu"> <li><a data-value="indexName">公交指标名称</a></li> //<li><a data-value="indexSystemFlag">公交指标标识</a></li> </ul> </div> </td> <td id="search_td2" style="padding-left: 5px;"> <input id="search_indexName" type="text" class="form-control" placeholder="请输入查询条件" style="width: 150px;margin-top: -4px;" /> </td> <td id="search_td3" style="padding-left: 5px;"> <a id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i> 查询</a> </td> </tr> </table> </div>