如果日期为空或为空或未定义，如何禁用单元格？

Question

我是 jqgrid 和 jquery 的新手，有人可以帮我在日期为 null、空或未定义时禁用单元格吗？实际上，某些 (rows,col) 日期数据的 json 存在，而某些则不存在。我想禁用日期数据不可用的行中的单元格。

网格单元格编辑 POC

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="/jqGrid/jquery-ui-1.11.4.custom/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/jqGrid/Guriddo_jqGrid_JS_5.0.1/css/ui.jqgrid.css">

<script type="text/ecmascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/jqGrid/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">

        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="/jqGrid/Guriddo_jqGrid_JS_5.0.1/src/jquery.jqGrid.js"></script>
    <script type="text/javascript">

        $(function () {


            "use strict";
            var grid = $("#tree");

            var initDateWithButton = function (elem) {

                var ids = grid.jqGrid('getDataIDs');
                   for (var i=0;i<ids.length;i++) {
                 var id=ids[i];
           if (grid.jqGrid('getCell',id,'assignedDate') == null) {
                    grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
                 }
           if (grid.jqGrid('getCell',id,'assignedDate') == "") {
                    grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
                 }
           if (grid.jqGrid('getCell',id,'assignedDate') == undefined) {
                    grid.jqGrid('setCell',id,'assignedDate','','not-editable-cell');
                 }
             }


                        if (/^\d+%$/.test(elem.style.width)) {
                        // remove % from the searching toolbar
                        elem.style.width = '';
                    }
                    // to be able to use 'showOn' option of datepicker in advance searching dialog
                    // or in the editing we have to use setTimeout
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: 'dd-M-yy',
                            showOn: 'button',
                            changeYear: true,
                            changeMonth: true,
                            showWeek: false,
                            showButtonPanel: true,
                            buttonImage: 'http://rcban0015:10039/GridPOC/pages/calenderIcon.gif',
                            onClose: function (dateText, inst) {
                                inst.input.focus();
                            }
                        });
                        $(elem).next('button.ui-datepicker-trigger').button({
                            text: false,
                            position: "relative",
                            top: "4px"
                        });
                    }, 100);

                },
                dateTemplate = {align: 'center', sorttype: 'date', editable: true,
                    formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
                    editoptions: { dataInit: initDateWithButton, size: 11 },
                    searchoptions: {
                        sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                        dataInit: initDateWithButton,
                        size: 11,          // for the advanced searching dialog
                        attr: {size: 11}   // for the searching toolbar
                    }},
                lastSel;

            jQuery('#tree').jqGrid({
            url: '<%= webAppAccess.getBackchannelActionURL("actionListjqGridPagination",false) %>', 

               "colModel":[
     {
      "name":"course_id",
      "index":"course_id",
      "sorttype":"int",
      "key":true,
      "hidden":true,
      "width":50
     },{
      "name":"courseName",
      "index":"courseName",
      "sorttype":"string",
      "label":"courseName",
      "width":200
     },{
      "name":"facility",
      "index":"facility",

      "label":"facility",
      "width":200,
      "align":"left"
     },{
      "name":"assignedDate",
      "index":"assignedDate",
      "label":"assignedDate",
      "width":110,
      "template": dateTemplate
     },{
      "name":"dueDate",
      "index":"dueDate",
      "label":"dueDate",
      "width":110,
      "template": dateTemplate
     },
     {
      "name":"AssignmentStatus",
      "index":"AssignmentStatus",

      "label":"AssignmentStatus",
      "width":50
     },{
      "name":"Action",
      "index":"Action",

      "label":"Action",
      "width":50
     },
     {
      "name":"lft",
      "hidden":true
     },{
      "name":"rgt",
      "hidden":true
     },{
      "name":"level",
      "hidden":true
     },{
      "name":"uiicon",
      "hidden":true
     }
    ],

    "jsonReader": { "repeatitems": false, "root": "employees.rows" },
"toolbar": [true, "top"],
    "width":"1200",
    "hoverrows":false,
    "viewrecords":false,
    "gridview":true,
    "height":"auto",
    "sortname":"lft",
    "loadonce":true,
    "rowNum": 2,
    "rowList":[2,10,15],

    "scrollrows":true,
    // enable tree grid
    "treeGrid":true,
    // which column is expandable
    "ExpandColumn":"courseName",
    // datatype
    "treedatatype":"json",
    // the model used
    "treeGridModel":"nested",
    // configuration of the data comming from server
    "treeReader":{
      "left_field":"lft",
     "right_field":"rgt",
     "level_field":"level",
     "leaf_field":"isLeaf",
     "expanded_field":"expanded",
     "loaded":"loaded",
     // set the ui icon field froom data
     "icon_field":"uiicon"
    },
    "sortorder":"asc",
    "datatype":"json",
    "pager":"#pager",
    "cellEdit": true, // TRUE = turns on celledit for the grid.
    "cellsubmit" : 'clientArray',
    "editurl": 'clientArray'
   }); 

     $('#t_' +"tree")
                .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;<button id=\"globalSearch\" type=\"button\">Search</button></div>"));
        $("#globalSearchText").keypress(function (e) {
                var key = e.charCode || e.keyCode || 0;
                if (key === $.ui.keyCode.ENTER) { // 13
                    $("#globalSearch").click();
                }
            });
            $("#globalSearch").button({
                icons: { primary: "ui-icon-search" },
                text: false
            }).click(function () {
                var postData = jQuery('#tree').jqGrid("getGridParam", "postData"),
                    colModel = jQuery('#tree').jqGrid("getGridParam", "colModel"),
                    rules = [],
                    searchText = $("#globalSearchText").val(),
                    l = colModel.length,
                    i,
                    cm;
                for (i = 0; i < l; i++) {
                    cm = colModel[i];
                    if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
                        rules.push({
                            field: cm.name,
                            op: "cn",
                            data: searchText
                        });
                    }
                }
                postData.filters = JSON.stringify({
                    groupOp: "OR",
                    rules: rules
                });
                jQuery('#tree').jqGrid("setGridParam", { search: true });
                jQuery('#tree').trigger("reloadGrid", [{page: 1, current: true}]);
                return false;
            });
  });
    </script>
</head>
<body>
    <table id="tree"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

Answer 1

检查这是否 How to disable editing for soe cells in row editing of JQGrid 帮助，它看到它是类似的东西，你只需要添加到你的逻辑中。

Answer 2

存在 jqGrid 的替代分支：free jqGrid, which I develop since more as one year. It has the functionality, where one can define editable property of colModel as function, which can return true or false based on the cell or the row content. See the wiki article 了解更多详情。

如果日期为空或为空或未定义，如何禁用单元格？

How to disable the cell if the date is empty or null or undefined?

jqgrid