jqgrid 列表头 根据选中顺序排序和显示
作者：互联网
好久没看，再来看看，脑细胞死了不少，呃呃呃呃。。。。
jqgrid 本身的列的colNames就有hidden属性，此业务是在显示的列上，客户进行操作，显示和排序自己要的。
过滤设置hidden属性的。
getAllShowNames: function(){
var self = this;
var temp = [];
// var colModelIndexArr={};
for(var i = 0; i < self.colNames.length; i++) {
if(self.colModel[i].hidden) continue;
var tk = self.colModel[i].name,
colName = self.colNames[i];
temp.push({"name": colName,"key": tk});
// colModelIndexArr[i]=tk;
}
self.showNames = temp;
// self.colModelIndexArr = colModelIndexArr;
},layui弹出模态框，初始化HTML
getAllCheckboxItems: function(){
var self = this;
var sortItems = "<div style='padding-top: 20px;' class='grid-config-layer " + self.gridId + "-config-layer'>";
$(self.showNames).each(function(i, e){
if (self.selectColSortKeys.includes(e.key)) {
var tmp = self.selectColSortKeys.indexOf(e.key)+1;
sortItems += "<div class='col-sm-3'><input type='checkbox' " + " class='jt-gc-check jt-gc-item jt-gc-sortCol" + "' value='" + e.key + "' checked>" + e.name;
sortItems += "<span class='order' style='color:red;'>("
sortItems += tmp+ ")</span>"
} else {
sortItems += "<div class='col-sm-3'><input type='checkbox' " + " class='jt-gc-check jt-gc-item jt-gc-sortCol" + "' value='" + e.key + "' " + ">" + e.name;
}
sortItems += "</div>";
})
sortItems += "</div>";
return sortItems;
},绑定每个checkbox事件，保存每次操作的结果：
$(document).on('click', '.jt-gc-sortCol', function(e){
console.log(".jt-gc-sortCol")
if($(this).is(":checked")) {
var sotrKey = $(this).val();
var order = self.selectColSortKeys.length;
self.selectColSortKeys[order]=sotrKey;
order += 1;
$(this).closest('.col-sm-3').append("<span class='order' style='color:red;'>("+order+")</span>");
}else{
var order = $(this).closest('.col-sm-3').find('.order').text()
order = parseInt(order.replace(")", "").replace("(", ""));
$(this).next().remove();
var orderKey = Object.keys(self.selectColSortKeys);
var orderLength = orderKey.length;
var changeKey = orderKey.splice(order-1, orderKey.length-1);
$(changeKey).each(function(k,v){
v = parseInt(v);
var sortKey = v + 1
self.selectColSortKeys[v]=self.selectColSortKeys[sortKey];
var classN = "input[value="+self.selectColSortKeys[sortKey]+"]";
var inputTag = $('.' + self.gridId + '-config-layer').find(classN);
inputTag.next().text("(" + sortKey +")");
})
delete self.selectColSortKeys[orderLength-1];
self.selectColSortKeys.length = orderLength - 1;
}
});
},这里用到对象的一些属性，
选中：只要在后面增加就好，页面的checkbox也增加序号
取消选中： 获取被删除的是哪个checkbox的序号，在总的选中中，获取每个选中的下标，用splice获取被删除的下标之后的所有下标，这后面的下标的序号要减一，遍历下标，有两个操作
（1）修改页面的checkbox的序号，
（2）总的保存序号的对象的元素要从被删除的序号开始往前移动一个。
最后要删除总的保存序号的对象的最后一个元素，而且对象的length属性不会自动减一，要手动修改。
最后是保存localstorage和服务器。
点击确认，表格刷新，重置列。
saveSysSortColNameConfig: function() {
var self = this;
var url = ListUtil._CONS_.SAVE_GRID_CONFIGER;
var param = {
key: (self.gridId + ".grid." + self.key),
content: JSON.stringify(self.selectColSortKeys)
};
if(self.configId) {
url = ListUtil._CONS_.SAVE_GRID_CONFIGER;
param.id = self.configId;
}
FormUtils.submit(url, param, function(msg){
if(msg.success){
window.localStorage.removeItem(self.gridId + '.grid.' + self.key);
self.setSortCol();
if(!self.configId) self.configId = msg.msgCode;
DialogUtils.success("提示", "配置已保存！");
}
});
},
setSortCol: function() {
var self = this;
var colModelIndex = self.colModelIndex;
var allIndex = Object.values(colModelIndex);
var allIndexAdd2 = [];
$(allIndex).each(function(k, v){
allIndexAdd2.push(v+2);
})
var selectAllIdx = [];
$(self.selectColSortKeys).each(function(idx, key){
var allIdx = colModelIndex[key];
selectAllIdx.push(allIdx+2);
allIndexAdd2.splice(allIdx, 1);
})
var showColList = [], hideColList = [];
$(self.showNames).each(function(k, v){
var key = v.key;
if(self.selectColSortKeys.includes(key)) {
showColList.push(key);
} else {
hideColList.push(key);
}
})
self.grid.setGridParam().showCol(showColList);
self.grid.setGridParam().showCol(hideColList);
var permAll = selectAllIdx.concat(allIndexAdd2);
permAll.unshift(0, 1);
self.grid.remapColumns(permAll, true);
// self.grid.trigger("reloadGrid");
},不过这个重置表格有问题，导致表格错位。
到现在都不知道怎么回事，额鹅鹅鹅
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css"/>
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8"/>
<title>jqGrid Loading Data - Edit Dialogs with Custom Layout</title>
</head>
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<button class="button">排序表头</button>
</div>
<script type="text/javascript">
$(document).on('click', '.button', function (){
var perm = [
0,
1,
3, // CompanyName
2, // CustomerID
5, // PostalCode
4, // Phone
6, // City
]
$("#jqGrid").remapColumns(perm, true)
})
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
editurl: 'clientArray',
datatype: "json",
rownumbers: true,
multiselect: true,
colNames: ["Customer ID", "Company Name", "Phone", "Postal Code", "City"],
colModel: [
{
label: 'CustomerID',
name: 'CustomerID',
width: 75
},
{
label: 'Company Name',
name: 'CompanyName',
width: 140,
editable: true, // must set editable to true if you want to make the field editable
// set options related to the layout of the Edit and Add Forms
hidden: true,
formoptions: {
colpos: 1, // the position of the column
rowpos: 1, // the position of the row
label: "Company Name: " // the label to show for each input control
//elmsuffix: " * " // the suffix to show after that
}
},
{
label: 'Phone',
name: 'Phone',
width: 100,
editable: true,
formoptions: {
colpos: 1,
rowpos: 2
}
},
{
label: 'Postal Code',
name: 'PostalCode',
width: 80,
editable: true,
formoptions: {
colpos: 2,
rowpos: 1,
label: "Postal Code"
}
},
{
label: 'City',
name: 'City',
width: 140,
editable: true,
formoptions: {
colpos: 2,
rowpos: 2
}
}
],
loadOnce: true,
viewrecords: true,
width: 780,
height: 200,
rowNum: 10,
pager: "#jqGridPager"
});
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: false,
refresh: false,
view: false,
position: "left",
cloneToTop: false
},
// options for the Edit Dialog
{
height: 'auto',
width: 620,
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
height: 'auto',
width: 620,
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
});
</script>
<!-- This code is related to code tabs -->
<br/>
<span
style="margin-left:18px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
<br/><br/>
<div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
<script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
<link rel="stylesheet" href="../../../css/prettify.css"/>
<script type="text/ecmascript" src="../../../js/codetabs-b.js"></script>
<script type="text/javascript">
var tabData =
[
{name: "HTML", url: "index.html", lang: "lang-html"},
{name: "Data", url: "data.json", lang: "lang-json"},
{name: "Description", url: "description.html", lang: "lang-html"}
];
codeTabs(tabData);
</script>
<!-- End of code related to code tabs -->
</body>
</html>这是 Guriddo_jqGrid_JS_5_3_X_demo 的里的代码，点击第一次是可以排序的，有没有大神做过这种业务的，刚转前端1年，就叫我做这个，，，，，，
标签：function,jqgrid,self,selectColSortKeys,选中,key,var,排序,true 来源： https://blog.csdn.net/qq_27009517/article/details/122733968