Javascript 如何在jquery网格中为特定单元格（而不是整行）呈现禁用的复选框
当我加载页面时，一些复选框应该被禁用，用户不能选择它们。例如，加载页面时，应禁用奇数id行的复选框。但不应禁用整行，仅禁用复选框。我已经想了很长时间了，但我找不到任何答案。提前谢谢。 这是我的密码Javascript 如何在jquery网格中为特定单元格（而不是整行）呈现禁用的复选框,javascript,jquery,html,struts2-jquery-grid,paramquery,Javascript,Jquery,Html,Struts2 Jquery Grid,Paramquery,当我加载页面时，一些复选框应该被禁用，用户不能选择它们。例如，加载页面时，应禁用奇数id行的复选框。但不应禁用整行，仅禁用复选框。我已经想了很长时间了，但我找不到任何答案。提前谢谢。 这是我的密码 !DOCTYPE HTML> <html> <head> <!--jQuery dependencies--> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jq
!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script type="text/javascript" src="pqgrid.min.js" ></script>
<!--Main javscript file to create the paramquery-->
<script type="text/javascript">
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{ id: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
{ id: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
{ id: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
{ id: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
{ id: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
{ id: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
{ id: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3'},
{ id: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
{ id: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
{ id: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
{ id: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
{ id: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
{ id: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
{ id: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
{ id: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5'},
{ id: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
{ id: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
{ id: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
{ id: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
{ id: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
];
var obj = {
scrollModel: { autoFit: true },
numberCell: {show: false},
title: "Checkbox selections",
selectionModel: { type: null },
pasteModel: { on: false },
height: 'flex',
pageModel: { type: "local", rPP: 10 },
colModel:
[
{ title: "ID", width: 100, dataType: "integer", dataIndx: "id" },
{ title: "Company", width: 220, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx: "profits" },
{ title: "", dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center",
cb: { header: true, all: false },
type: 'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable: false, editable: false,
display_checkbox: false
}
],
toolbar: {
items: [{
type: 'button',
label: 'Get Row ID of selected rows',
listeners: [{ 'click': function () {
var $grid = $(this).closest('.pq-grid');
var selarray = $grid.pqGrid('selection', { type: 'row', method: 'getSelection' });
var ids = [];
for (var i = 0, len = selarray.length; i < len; i++) {
var rowData = selarray[i].rowData;
ids.push(rowData.id);
}
alert(ids);
}
}]
}
]
},
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
});
</script>
<body>
<div id="grid_selection_checkbox" style="margin:auto;"></div>
</body>
</html>
呈现网格后，jQuery可以查找复选框 您可以使用这些类来选择行 .pq网格行是每行的类别。 .pq grid oddRow是奇数行的类。 .pq网格标题行是标题行的类。 因此，要获得偶数行，可以使用“所有行”选择器和“选择器” 要针对复选框，请使用 下面是一个代码段，其中奇数行上的复选框和列上的复选框都被禁用 $function{ //复选框和行选择的状态保存在状态字段中。 风险值数据=[ {id:1，公司：'Exxon Mobil'，收入：'339938.0'，利润：'36130.0'}， {id:2，公司：'Wal-Mart Stores'，收入：'315654.0'，利润：'11231.0'}， {id:3，公司：'Royal Dutch Shell'，收入：'306731.0'，利润：'25311.0'}， {id:4，公司：'BP'，收入：'267600.0'，利润：'22341.0'}， {id:5，公司：'General Motors'，收入：'192604.0'，利润：'-10567.0'}， {id:6，公司：'Chevron'，收入：'189481.0'，利润：'14099.0'}， {id:7，公司：'DaimlerChrysler'，收入：'186106.3'，利润：'3536.3'}， {id:8，公司：'Toyota Motor'，收入：'185805.0'，利润：'12119.6'}， {id:9，公司：'Ford Motor'，收入：'177210.0'，利润：'2024.0'}， {id:10，公司：'ConocoPhillips'，收入：'166683.0'，利润：'13529.0'}， {id:11，公司：'General Electric'，收入：'157153.0'，利润：'16353.0'}， {id:12，公司：'Total'，收入：'152360.7'，利润：'15250.0'}， {id:13，公司：'ING集团'，收入：'138235.3'，利润：'8958.9'}， {id:14，公司：'Citigroup'，收入：'131045.0'，利润：'24589.0'}， {id:15，公司：'AXA'，收入：'129839.2'，利润：'5186.5'}， {id:16，公司：'Allianz'，收入：'121406.0'，利润：'5442.4'}， {id:17，公司：'Volkswagen'，收入：'118376.6'，利润：'1391.7'}， {id:18，公司：'Fortis'，收入：'112351.4'，利润：'4896.3'}， {id:19，公司：'Crédit Agricole'，收入：'110764.6'，利润：'7434.3'}， {id:20，公司：'American Intl.Group'，收入：'108905.0'，利润：'10477.0'} ]; var obj={ scrollModel:{autoFit:true}， numberCell:{show:false}， 标题：复选框选择， selectionModel:{type:null}， 粘贴模型：{on:false}， 高度：'flex'， 页面模型：{type:local，rPP:10}， colModel： [ {title:ID，width:100，dataType:integer，dataIndx:ID}， {title:Company，width:220，dataType:string，dataIndx:Company}， {标题：收入百万美元，宽度：180，数据类型：float，align:right，dataIndx:Revenues}， {标题：利润百万美元，宽度：170，数据类型：float，align:right，dataIndx:Profits}， {title:，dataIndx:state，maxWidth:30，minWidth:30，align:center， cb:{header:true，all:false}， 键入：“checkBoxSelection”，cls:“ui状态默认值”，可调整大小：false，可排序：false，可编辑：false， 显示复选框：false } ], 工具栏：{ 项目：[{ 键入：“按钮”， 标签：“获取选定行的行ID”， 侦听器：[{'单击]：函数{ var$grid=$this.closest'.pq grid'； var selarray=$grid.pqGrid'selection'，{type:'row'，method:'getSelection'}； var-id=[]； 对于变量i=0，len=selarray.length；i
// Disable the columns checkboxes (check all)
$(".pq-grid-title-row [type='checkbox']").prop("disabled",true);
// Disable checkboxes on even rows.
$(".pq-grid-row:not(.pq-grid-oddRow) [type='checkbox']").prop("disabled",true);
// Disable checkboxes on odd rows.
$(".pq-grid-oddRow [type='checkbox']").prop("disabled",true);