我是jqGrid的新手,并且想知道一种在searchBox中对dropDown中的各个元素重新排序的方法。
我观察到默认情况下,在搜索框中,我们根据网格colModel中显示的顺序获取columnNames。但是我希望特定的列位于searchBox对话框的顶部。例如在我的jqGrid中有3列
ID | EMPLOYEENAME | EMPID
在上面的例子中,假设所有三个字段都是可搜索的,我得到的searchBox填充为
ID
EMPLOYENAME
EMPID
以相同的顺序。
但我希望
EMPID
在searchBox中排在最前面。请指教
最佳答案
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css" />
<script src="https://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function setCookie(cname, cvalue, exdays)
{
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0)
{
return c.substring(name.length, c.length);
}
}
return "";
}
var delete_cookie = function (name)
{
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};
</script>
<script type="text/javascript">
$(document).ready(function () {
DisplayGrid();
});
function DisplayGrid()
{
$.ajax({
type: "POSt",
url: "Demo_12.aspx/Display",
data: "{}",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function OnSuccess(data) {
debugger
var dadads = data.d;
$("#grid").jqGrid({
colModel: [
{ name: "C_Code", hidden: true },
{ name: "C_Name", index: 'C_Name', width: 122 },
{ name: "C_S_Name", index: 'C_S_Name', width: 122 },
{ name: "C_RapNet", index: 'C_RapNet', width: 100 },
{ name: "FancyCol", index: 'FancyCol', width: 100 },
{ name: "FancyColInten", index: 'FancyColInten', width: 120 },
{ name: "FancyColOverTone", index: 'FancyColOverTone', width: 120 },
{ name: "ARGCol", index: 'ARGCol', width: 150 },
{ name: "ARGColInten", index: 'ARGColInten', width: 120 },
{ name: "C_GIA_Name", index: 'C_GIA_Name', width: 90 },
{ name: "Ord", index: 'Ord', width: 90 },
{
name: "Action", width: 115, formatter: function (cellvalue, options, rowObject) {
return '<a href="javascript:void(0)" class="" id="editbtn" ><i class="entypo-pencil"></i></a>';
}
},
],
onSelectAll: function (aRowids, isSelected) {
var myGrid = $('#grid');
var coockiVal = getCookie("selectedcode_color");
var coockiVal_count = getCookie("selectedcount_color_color");
var noofcount = 0;
if (coockiVal == null || coockiVal == '') {
coockiVal = ',';
}
if (coockiVal_count == null || coockiVal_count == '') {
coockiVal_count = '0';
}
var noofcount = parseInt(coockiVal_count);
for (i = 0, count = aRowids.length; i < count; i++) {
var celValue = myGrid.jqGrid('getCell', aRowids[i], 'C_Code');
if (isSelected == true) {
var n = coockiVal.indexOf(',' + celValue + ',');
if (n == -1) {
coockiVal = coockiVal + ',' + celValue + ',';
noofcount = parseInt(noofcount) + 1;
}
}
else {
var n = coockiVal.indexOf(',' + celValue + ',');
if (n != -1) {
coockiVal = coockiVal.split(',' + celValue + ',').join("");
noofcount = parseInt(noofcount) - 1;
}
}
}
setCookie("selectedcode_color", coockiVal, 30);
setCookie("selectedcount_color", noofcount, 30);
var elems = document.getElementById('noofCount');
elems.value = noofcount;
},
serializeGridData: function (postData) {
postData.filters = JSON.stringify({
});
return JSON.stringify(postData);
},
jsonReader: { root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
onInitGrid: function () {
$("<div style='display:none;' id='no-record'>No Record(s) Found</div>").insertAfter($(this).parent());
},
beforeSelectRow: function (rowid, e) {
debugger
//return $(e.target).is('input[type=checkbox]');
var $self = $(this),
iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
cm = $self.jqGrid("getGridParam", "colModel"),
localData = $self.jqGrid("getLocalRow", rowid);
if (cm[iCol].name === "cb" && e.target.tagName.toUpperCase() === "INPUT") {
var coockiVal = getCookie("selectedcode_color");
var coockiVal_count = getCookie("selectedcount_color");
if (coockiVal == null || coockiVal == '') {
coockiVal = ',';
}
if (coockiVal_count == null || coockiVal_count == '') {
coockiVal_count = '0';
}
debugger
var myGrid = $('#grid');
var result1 = $(e.target).is(":checked");
if (result1 == true) {
var celValue = myGrid.jqGrid('getCell', rowid, 'C_Code');
coockiVal = coockiVal + ',' + celValue + ',';
coockiVal_count = parseInt(coockiVal_count) + 1;
setCookie("selectedcode_color", coockiVal, 30);
setCookie("selectedcount_color", coockiVal_count, 30);
}
else {
var celValue = myGrid.jqGrid('getCell', rowid, 'C_Code');
coockiVal = coockiVal.split(',' + celValue + ',').join("");
coockiVal_count = parseInt(coockiVal_count) - 1;
setCookie("selectedcode_color", coockiVal, 30);
setCookie("selectedcount_color", coockiVal_count, 30);
}
var elems = document.getElementById('noofCount');
elems.value = coockiVal_count;
}
return $(e.target).is('input[type=checkbox]');
return true; // allow selection
},
recordpos: 'left', cmTemplate: { sortable: false, title: false },
data: dadads,
ignoreCase: true,
rowNum: 10,
rowList: [10, 50, 100, 150],
pager: $('#pagingGrid'),
viewrecords: true,
height: "auto",
shrinkToFit: false,
autowidth: false,
fixed: true,
multiselect: true,
sortname: "invdate",
sortorder: "desc",
rowNum: 10,
}).jqGrid("filterToolbar");
},
Error: function OnError(data) {
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grid"></table>
<div id="pagingGrid"></div><br />
</div>
</form>
</body>
</html>
关于javascript - JqGrid重新排序searchBox中的元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13486970/