如何在特定的單元格（而不是整行）的jquery網格中呈現禁用的復選框

Question

當我加載頁面時，某些復選框應被禁用，用戶應無法選擇它們。 例如，加載頁面時，應禁用帶有奇數“ id”的行的復選框。 但是不應禁用整個行，而應禁用復選框。 我很久以來一直在試圖找出答案，但找不到任何答案。 提前致謝。 這是我的代碼。

!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>

Answer 1

呈現網格后，jQuery可以查找復選框。

您可以使用PQ Grid類來選擇行。

.pq-grid-row是每一行的類。
.pq-grid-oddRow是奇數行的類。
.pq-grid-title-row是.pq-grid-title-row的類。

因此，要獲得偶數行，可以使用all row選擇器和.not()選擇器。

要定位復選框，請使用屬性選擇器。

// 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);

這是一個片段，其中禁用了奇數行和“檢查所有”列的復選框。

 <!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--> <!-- I used CDNs here, since your relative paths to PQ Grid was not working here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pqGrid/2.4.1/pqgrid.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/pqGrid/2.4.1/pqgrid.min.css" rel="stylesheet"/> <!--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); // Disable the columns checkboxes (check all) $(".pq-grid-title-row [type='checkbox']").prop("disabled",true); // Disable checkboxes on odd rows. $(".pq-grid-oddRow [type='checkbox']").prop("disabled",true); }); </script> <body> <div id="grid_selection_checkbox" style="margin:auto;"></div> </body> </html>

如何在特定的單元格（而不是整行）的jquery網格中呈現禁用的復選框

問題描述

1 個解決方案

解決方案1
1 2019-03-25 20:40:35

如何在特定的單元格（而不是整行）的jquery網格中呈現禁用的復選框

問題描述

1 個解決方案

解決方案1 1 2019-03-25 20:40:35

解決方案1
1 2019-03-25 20:40:35