jqGrid尝试使用json中定义的colmodel冻结列.仅冻结标题行 [英] jqGrid Trying to freeze column with colmodel defined in json . Only freezes header row
本文介绍了jqGrid尝试使用json中定义的colmodel冻结列.仅冻结标题行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网格，我从服务器加载了网格，因为列是由数据选择控制的.我的这部分工作正常，但我想冻结第1列.
I have a grid which I load from the server as the columns are controlled by the data selection. I have this part working fine, but I want to freeze column 1.
我已经在json模型定义中设置了Frozen:true属性，但它仅冻结了标头.
I've set the frozen:true attribute in the json model definition, but it only freezes the header.
我尝试将列设置为冻结来自ajax调用的成功事件.
I try to set the columns to frozen within the success event from the ajax call.
谢谢.
$(document).ready(function () {
var functionsMapping = {
"fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
var strCell=pCellValue.replace(/\|/g,'<br />');
return strCell;
}
};
$.ajax({
type: "GET",
url: "json/MachineJobsSummary.asp?qryDatabase="+$('#wsDatabase').val(),
data: "",
dataType: "json",
success: function (result) {
var columnData = result.mypage.outerwrapper,
columnNames = result.colNames,
columnModel = result.colModel;
var i,objCol;
for (i=0;i<columnModel.length;i++) {
objCol = columnModel[i];
if (objCol.hasOwnProperty("formatter") &&
functionsMapping.hasOwnProperty(objCol.formatter)) {
objCol.formatter = functionsMapping[objCol.formatter];
}
}
$("#dataGrid").jqGrid({
datatype: 'jsonstring'
,datastr: columnData
,colNames: columnNames
,colModel: columnModel
,jsonReader: {
root: 'innerwrapper.rows'
,repeatitems: false
,id: "ID"
}
,gridview: true
,loadonce: false
,height: 600
,width:1000
,shrinkToFit: false
,rowNum: 10000
,autoencode: true
,viewrecords: true
,sortable: false
});
$("#dataGrid").jqGrid('setFrozenColumns');
}
});
});
Json数据(我是从firefug复制的，但是我已经重新格式化，因此希望在重新格式化时不会犯任何错误)
Json data (I've copied from firefug but I've reformatted so hopefully no mistakes made when reformatting)
{ "colModel" : [ {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false }
, {"name": "WSJOB_70186_1","index": "WSJOB_70186_1" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_60607","index": "WSJOB_60607" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_32446","index": "WSJOB_32446" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_61026B","index": "WSJOB_61026B" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_61838","index": "WSJOB_61838" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_71102C","index": "WSJOB_71102C" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_71048A","index": "WSJOB_71048A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_62565","index": "WSJOB_62565" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_71056F","index": "WSJOB_71056F" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_71030A","index": "WSJOB_71030A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
, {"name": "WSJOB_71033A","index": "WSJOB_71033A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" }
]
, "colNames" : ["Prod Group" ,"70186_1","60607","32446","61026B","61838","71102C","71048A","62565","71056F","71030A","71033A"]
, "mypage" : { "outerwrapper": "page":"1","total":"1","records":"21",
"innerwrapper":
{"rows":[ {"ID":1,"GTTWO_PROD_GROUP":" ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02852 |WP02853 ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":2,"GTTWO_PROD_GROUP":"BARREL","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01037 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":3,"GTTWO_PROD_GROUP":"BBAR ","WSJOB_70186_1":" ","WSJOB_60607":"WP74512 |WP74570 ","WSJOB_32446":" ","WSJOB_61026B":"WP79037 |WP79039 ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00463 |WP00464 ","WSJOB_62565":"WP99555 |WP99556 ","WSJOB_71056F":" ","WSJOB_71030A":"WP99992 |WP99993 ","WSJOB_71033A":" "}
, {"ID":4,"GTTWO_PROD_GROUP":"BBCAP ","WSJOB_70186_1":" ","WSJOB_60607":"WP74427 |WP74428 ","WSJOB_32446":" ","WSJOB_61026B":"WP78432 |WP79587 |WP78433 ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00461 |WP00462 ","WSJOB_62565":"WP00445 |WP00447 |WP00446 ","WSJOB_71056F":" ","WSJOB_71030A":"WP99986 |WP99988 |WP99987 ","WSJOB_71033A":"WP99884 |WP99886 |WP99885 "}
, {"ID":5,"GTTWO_PROD_GROUP":"BKSA ","WSJOB_70186_1":" ","WSJOB_60607":"WP74425 |WP74616 |WP74615 |WP74426 ","WSJOB_32446":"WP72673 |WP72674 ","WSJOB_61026B":"WP78436 |WP78440 |WP78438 |WP78437 ","WSJOB_61838":" ","WSJOB_71102C":"WP02831 |WP02843 |WP02842 |WP02834 ","WSJOB_71048A":"WP00468 |WP00475 |WP00472 |WP00471 ","WSJOB_62565":"WP99559 |WP99563 |WP99561 |WP99560 ","WSJOB_71056F":"WP01035 |WP01043 ","WSJOB_71030A":"WP00013 |WP00020 |WP00017 |WP00016 ","WSJOB_71033A":"WP99890 |WP99895 |WP99894 |WP99893 "}
, {"ID":6,"GTTWO_PROD_GROUP":"BRGA ","WSJOB_70186_1":" ","WSJOB_60607":"WP74482 |WP74483 ","WSJOB_32446":" ","WSJOB_61026B":"WP78426 |WP78427 ","WSJOB_61838":" ","WSJOB_71102C":"WP02832 |WP02833 ","WSJOB_71048A":"WP00469 |WP00474 |WP00473 |WP00470 ","WSJOB_62565":"WP99572 |WP99580 |WP99575 |WP99573 ","WSJOB_71056F":"WP01032 |WP01042 |WP01041 |WP01034 ","WSJOB_71030A":"WP00014 |WP00019 |WP00018 |WP00015 ","WSJOB_71033A":"WP99891 |WP99892 "}
, {"ID":7,"GTTWO_PROD_GROUP":"CAP ","WSJOB_70186_1":" ","WSJOB_60607":"WP74367 |WP74876 |WP74875 |WP74430 |WP74429 |WP74369 |WP74368 ","WSJOB_32446":" ","WSJOB_61026B":"WP78430 |WP81510 |WP78705 ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00458 |WP00460 |WP00459 ","WSJOB_62565":"WP00442 |WP04759 |WP04692 |WP04156 |WP04147 |WP01596 |WP01593 |WP00450 ","WSJOB_71056F":" ","WSJOB_71030A":"WP99989 |WP99991 |WP99990 ","WSJOB_71033A":"WP99887 |WP99889 |WP99888 "}
, {"ID":8,"GTTWO_PROD_GROUP":"CASE ","WSJOB_70186_1":" ","WSJOB_60607":"WP74541 |WP74569 |WP74551 |WP74550 |WP74549 |WP74548 |WP74547 |WP74546 |WP74544 |WP74543 |WP74542 ","WSJOB_32446":" ","WSJOB_61026B":"WP78408 |WP80811 |WP80004 |WP79981 |WP79980 |WP79167 |WP79166 |WP78919 |WP78425 |WP78420 |WP78419 |WP78418 |WP78417 |WP78416 |WP78415 |WP78414 |WP78413 |WP78412 |WP78410 |WP78409 ","WSJOB_61838":" ","WSJOB_71102C":"WP02847 |WP86421 |WP86420 |WP03370 |WP03286 |WP02856 |WP02855 |WP02851 |WP02850 |WP02848 ","WSJOB_71048A":"WP00227 |WP97748 |WP00485 |WP00484 |WP00483 |WP00482 |WP00481 |WP00480 |WP00478 |WP00477 |WP00451 ","WSJOB_62565":"WP99850 |WP99865 |WP99864 |WP99863 |WP99862 |WP99861 |WP99860 |WP99859 |WP99858 |WP99855 |WP99854 |WP99853 ","WSJOB_71056F":"WP01006 |WP01039 |WP01031 |WP01016 |WP01015 |WP01013 |WP01011 |WP01007 ","WSJOB_71030A":"WP00004 |WP99984 |WP00012 |WP00011 |WP00010 |WP00009 |WP00008 |WP00007 |WP00006 |WP00005 ","WSJOB_71033A":" "}
, {"ID":9,"GTTWO_PROD_GROUP":"FEEDER","WSJOB_70186_1":" ","WSJOB_60607":"WP74545 ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":"WP89008 |WP89770 |WP89769 |WP89044 |WP89022 |WP89010 |WP89009 ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01014 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":10,"GTTWO_PROD_GROUP":"GBOX ","WSJOB_70186_1":"WP71957 |WP71959 ","WSJOB_60607":"WP74262 ","WSJOB_32446":" ","WSJOB_61026B":"WP81151 |WP81152 ","WSJOB_61838":" ","WSJOB_71102C":"WP02857 |WP02868 |WP02867 |WP02858 ","WSJOB_71048A":"WP00486 |WP00494 |WP00493 |WP00487 ","WSJOB_62565":"WP99565 ","WSJOB_71056F":"WP01048 |WP01049 ","WSJOB_71030A":"WP00022 ","WSJOB_71033A":"WP00317 "}
, {"ID":11,"GTTWO_PROD_GROUP":"GEAR ","WSJOB_70186_1":" ","WSJOB_60607":"WP74513 ","WSJOB_32446":" ","WSJOB_61026B":"WP81211 |WP81218 |WP81217 |WP81216 |WP81215 |WP81214 |WP81213 |WP81212 ","WSJOB_61838":" ","WSJOB_71102C":"WP02859 |WP02872 |WP02871 |WP02870 |WP02869 |WP02862 |WP02861 |WP02860 ","WSJOB_71048A":"WP00488 |WP00498 |WP00497 |WP00496 |WP00495 |WP00491 |WP00490 |WP00489 ","WSJOB_62565":"WP99566 |WP99570 |WP99569 |WP99568 |WP99567 ","WSJOB_71056F":"WP01050 |WP01053 |WP01052 |WP01051 ","WSJOB_71030A":"WP00023 |WP00026 |WP00025 |WP00024 ","WSJOB_71033A":"WP00318 |WP00321 |WP00320 |WP00319 "}
, {"ID":12,"GTTWO_PROD_GROUP":"INFLBX","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP03369 ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01421 |WP05578 |WP05577 |WP01423 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":13,"GTTWO_PROD_GROUP":"LUB ","WSJOB_70186_1":" ","WSJOB_60607":"WP74469 ","WSJOB_32446":" ","WSJOB_61026B":"WP78441 ","WSJOB_61838":" ","WSJOB_71102C":"WP02864 ","WSJOB_71048A":"WP05069 ","WSJOB_62565":"WP02866 ","WSJOB_71056F":"WP01055 ","WSJOB_71030A":"WP00027 ","WSJOB_71033A":" "}
, {"ID":14,"GTTWO_PROD_GROUP":"MTGF ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP79165 ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00729 ","WSJOB_62565":"WP01394 |WP05435 |WP01492 |WP01491 ","WSJOB_71056F":" ","WSJOB_71030A":"WP00001 |WP03710 |WP03709 ","WSJOB_71033A":" "}
, {"ID":15,"GTTWO_PROD_GROUP":"PACKER","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02854 ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":16,"GTTWO_PROD_GROUP":"SCOMB ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP78421 |WP78422 ","WSJOB_61838":" ","WSJOB_71102C":"WP03371 ","WSJOB_71048A":" ","WSJOB_62565":"WP99557 |WP99558 ","WSJOB_71056F":"WP01047 ","WSJOB_71030A":"WP99994 |WP99995 ","WSJOB_71033A":" "}
, {"ID":17,"GTTWO_PROD_GROUP":"SEG ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02822 |WP02827 |WP02825 |WP02823 ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01029 |WP01030 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":18,"GTTWO_PROD_GROUP":"SPUR ","WSJOB_70186_1":" ","WSJOB_60607":"WP74416 ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02841 |WP02945 ","WSJOB_71048A":" ","WSJOB_62565":"WP99574 ","WSJOB_71056F":"WP01033 |WP01040 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":19,"GTTWO_PROD_GROUP":"USPD ","WSJOB_70186_1":"WP71960 ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02865 ","WSJOB_71048A":" ","WSJOB_62565":"WP99571 ","WSJOB_71056F":"WP01057 ","WSJOB_71030A":" ","WSJOB_71033A":" "}
, {"ID":20,"GTTWO_PROD_GROUP":"WPASSY","WSJOB_70186_1":" ","WSJOB_60607":"WP74666 |WP74835 ","WSJOB_32446":" ","WSJOB_61026B":"WP78423 |WP78428 ","WSJOB_61838":" ","WSJOB_71102C":"WP02817 |WP02829 |WP02828 ","WSJOB_71048A":"WP00466 ","WSJOB_62565":"WP99552 |WP99554 ","WSJOB_71056F":"WP01005 |WP01027 |WP01025 ","WSJOB_71030A":"WP99997 |WP99999 ","WSJOB_71033A":" "}
, {"ID":21,"GTTWO_PROD_GROUP":"WPLT ","WSJOB_70186_1":" ","WSJOB_60607":"WP74667 |WP74832 ","WSJOB_32446":" ","WSJOB_61026B":"WP78424 |WP78429 ","WSJOB_61838":" ","WSJOB_71102C":"WP02818 ","WSJOB_71048A":"WP00467 |WP00479 ","WSJOB_62565":"WP00443 |WP99579 |WP99553 |WP01601 |WP01595 |WP00444 ","WSJOB_71056F":"WP01026 |WP01028 ","WSJOB_71030A":"WP00000 |WP99998 ","WSJOB_71033A":" "}
]
}
}
}
进行更改以添加模板并包含在colModel中.
Changes to add a template and include in the colModel.
var myJobTemplate = {width: 100,align: "left",sortable:false, formatter:fncSplitOrders,unformat:fncReturnValue};
然后该模型的json已更新为
Then the json for the model has been updated to
{ "colModel" : [ {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false }
, {"name": "WSJOB_70186_1","template":"myJobTemplate" } .....
但是fncSplitOrders没有被执行.
But the fncSplitOrders isn't being executed.
我将其保留在您创建的functionMapping中，并将其添加为它自己的函数，但是如果单元格数据未经格式化，则所有输出都会输出.
I have left it in the functionsMapping which you created, and also added it as it's own function, but all that gets output if the cell data without formatting.
显然缺少有关如何触发/引用模板/功能的简单信息.
Obviously missing something simple as to how to trigger/reference the template/function.
谢谢.
推荐答案
首先，您应该修复JSON数据.您在问题中发布了错误的数据.部分
First of all you should fix the JSON data. You posted in the question wrong data. The part
"outerwrapper": "page":"1", ...}
应固定为
"outerwrapper": { "page":"1", ...}}
您的问题文字中可能只是错误.
Probably it was just error in the text of your question.
您的主要问题是冻结div的大小错误，我已经在答案和
Your main problem with wrong size of frozen div I described already in the answer and in this one.
因此，您应该触发"jqGridAfterGridComplete"事件，并再次调用fixPositionsOfFrozenDivs.
So you should trigger "jqGridAfterGridComplete" event and make additional call of fixPositionsOfFrozenDivs.
您将在演示上看到的结果，代码是
The results you will see on the demo which code is
$(function () {
"use strict";
var functionsMapping = {
"fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
var strCell=pCellValue.replace(/\|/g,'<br />');
return strCell;
}
},
fixPositionsOfFrozenDivs = function () {
var $rows;
if (this.grid.fbDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (this.grid.fhDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
$.ajax({
type: "GET",
url: "Keith1.json",
data: "",
dataType: "json",
success: function (result) {
var columnData = result.mypage.outerwrapper,
columnNames = result.colNames,
columnModel = result.colModel,
i,
objCol,
$grid = $("#dataGrid");
for (i = 0; i<columnModel.length; i++) {
objCol = columnModel[i];
if (objCol.hasOwnProperty("formatter") &&
functionsMapping.hasOwnProperty(objCol.formatter)) {
objCol.formatter = functionsMapping[objCol.formatter];
}
}
$grid.jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: 'innerwrapper.rows',
repeatitems: false,
id: "ID"
}
gridview: true,
height: 600,
width: 1000,
shrinkToFit: false,
rowNum: 10000,
autoencode: true,
viewrecords: true
});
$grid.jqGrid('setFrozenColumns');
$grid.triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($grid[0]);
}
});
});
此外，我建议您简化列模型.我建议您删除index属性，移动通用设置cmTemplete并删除许多具有默认值的属性:"align": "left","sortable":false.
Additionally I would recommend you to simplify column model. I recommend you remove index property, move common settings cmTemplete and remove many properties having default values: "align": "left","sortable":false.
这篇关于jqGrid尝试使用json中定义的colmodel冻结列.仅冻结标题行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
