Javascript 存在隐藏行时jqGrid冻结列
我有一个带有隐藏行的网格。我需要冻结前两列,但我已经看到,如果有一些隐藏行,“setFrozenColumns”不起作用。 有人有同样的问题吗?你能帮助我吗?Javascript 存在隐藏行时jqGrid冻结列,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我有一个带有隐藏行的网格。我需要冻结前两列,但我已经看到,如果有一些隐藏行,“setFrozenColumns”不起作用。 有人有同样的问题吗?你能帮助我吗? 谢谢。你是说隐藏行还是隐藏列?目前-截至4.3.2-冻结柱有: 以下限制告诉您何时无法设置冻结列 启用TreeGrid时 启用子栅格时 启用cellEdit时 使用内联编辑时-无法编辑冻结列 启用可排序列时-网格参数sortable设置为true或is function 当scroll设置为true或1时 启用数据分组时 因此,如果您
谢谢。你是说隐藏行还是隐藏列?目前-截至4.3.2-冻结柱有: 以下限制告诉您何时无法设置冻结列
- 启用TreeGrid时
- 启用子栅格时
- 启用cellEdit时
- 使用内联编辑时-无法编辑冻结列
- 启用可排序列时-网格参数sortable设置为true或is function
- 当scroll设置为true或1时
- 启用数据分组时
如果您的意思是有隐藏的列,那么冻结的列应该可以工作-您可能需要发布代码或一个小示例来演示问题。您是指隐藏的行还是隐藏的列?目前-截至4.3.2-冻结柱有: 以下限制告诉您何时无法设置冻结列
- 启用TreeGrid时
- 启用子栅格时
- 启用cellEdit时
- 使用内联编辑时-无法编辑冻结列
- 启用可排序列时-网格参数sortable设置为true或is function
- 当scroll设置为true或1时
- 启用数据分组时
如果您的意思是您有隐藏列,那么冻结列应该可以工作-您可能需要发布代码或一个小示例来演示问题。这是一个完整的示例:
var mydata = [
{
id: "1",
invdate: "2010-05-24",
name: "test",
note: "note",
tax: "10.00",
total: "2111.00"},
{
id: "2",
invdate: "2010-05-25",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
{
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"},
{
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"},
{
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
{
id: "6",
invdate: "2007-09-06",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"},
{
id: "7",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"},
{
id: "8",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "21.00",
total: "320.00"},
{
id: "9",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "11",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "12",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "13",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "14",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "15",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "16",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "17",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "18",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "19",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "21",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "22",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "23",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "24",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "25",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "26",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "27",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "28",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "29",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"}
];
jQuery("#list47").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 999999,
scroll: false,
shrinkToFit: false,
width: 350,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{
name: 'id',
index: 'id',
width: 60,
sortable: false, frozen: true},
{
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date",
formatter: "date"},
{
name: 'name',
index: 'name',
width: 100},
{
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float",
formatter: "number"},
{
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'note',
index: 'note',
width: 150,
sortable: false}
],
pager: "#plist47",
viewrecords: true,
multiselect: true,
caption: "single selection",
beforeSelectRow: function(rowid, e)
{
//jQuery("#list47").jqGrid('resetSelection');
//return(true);
}
});
document.getElementById("1").style.display = 'none';
$("#list47").jqGrid("destroyFrozenColumns")
.jqGrid("setColProp","id",{frozen:true})
.jqGrid("setColProp","invdate",{frozen:true})
.jqGrid("setFrozenColumns")
在这种情况下,只有标题被冻结,而不是整个列。这是一个完整的示例:
var mydata = [
{
id: "1",
invdate: "2010-05-24",
name: "test",
note: "note",
tax: "10.00",
total: "2111.00"},
{
id: "2",
invdate: "2010-05-25",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
{
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"},
{
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"},
{
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
{
id: "6",
invdate: "2007-09-06",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"},
{
id: "7",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"},
{
id: "8",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "21.00",
total: "320.00"},
{
id: "9",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "11",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "12",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "13",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "14",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "15",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "16",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "17",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "18",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "19",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "21",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "22",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "23",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "24",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "25",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "26",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"},
{
id: "27",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"},
{
id: "28",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"},
{
id: "29",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"}
];
jQuery("#list47").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 999999,
scroll: false,
shrinkToFit: false,
width: 350,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{
name: 'id',
index: 'id',
width: 60,
sortable: false, frozen: true},
{
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date",
formatter: "date"},
{
name: 'name',
index: 'name',
width: 100},
{
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float",
formatter: "number"},
{
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'note',
index: 'note',
width: 150,
sortable: false}
],
pager: "#plist47",
viewrecords: true,
multiselect: true,
caption: "single selection",
beforeSelectRow: function(rowid, e)
{
//jQuery("#list47").jqGrid('resetSelection');
//return(true);
}
});
document.getElementById("1").style.display = 'none';
$("#list47").jqGrid("destroyFrozenColumns")
.jqGrid("setColProp","id",{frozen:true})
.jqGrid("setColProp","invdate",{frozen:true})
.jqGrid("setFrozenColumns")
在这种情况下,只有标题被冻结,而不是整个列。谢谢您的回答。我是说隐藏的行。这里有一个例子(我没有做):[demo][1][1]:如果您试图以这种方式隐藏一行:document.getElementById(“1”).style.display='none';然后冻结列,框架无法正常工作:$(“#list47”).jqGrid(“destroyFrozenColumns”).jqGrid(“setColProp”,“id”,“{freezed:true}”).jqGrid(“setColProp”,“invdate”,“{freezed:true}).jqGrid(“setFrozenColumns”).trigger(“reloadGrid”);谢谢你的回答。我指的是隐藏的行。这里有一个例子(我没有这么做):[demo][1][1]:如果你试图以这种方式隐藏行:document.getElementById(“1”).style.display='none';然后冻结列,框架就不能正常工作:$(“#list47”).jqGrid(“destroyFrozenColumns”).jqGrid(“setColProp”,“id”,{freezed:true}).jqGrid(“setColProp”,“invdate”,{freezed:true}).jqGrid(“setFrozenColumns”).trigger(“reloadGrid”);