开发者

Unable to set jstree checkbox node to unchecked from JSON

开发者 https://www.devze.com 2023-02-17 23:50 出处:网络
I am unable to set CheckBox to unchecked[\"jstree-unchecked\"] for the node which has children. When I use firebug to determine the class of the node on the front-end side, it shows \"jstree-undetermi

I am unable to set CheckBox to unchecked["jstree-unchecked"] for the node which has children. When I use firebug to determine the class of the node on the front-end side, it shows "jstree-undetermined". What I really want is "jstree-unchecked" to be class, since that's what I am passing from server.

The following is the AJAX call I am making using JSON. I have also added JSON data I am getting from server. Is there anything wrong in the way I am formatting JSON data on server side?

For the following example "Dogs" node is causing problem. Though childrens of "Dogs" are unchecked and node class is jstree-unchecked; I am seeing "Dogs" node checked. Any advise to fix or improve code is greatly appreciated.

$(function () {
        $("#idTOC").bind("loaded.jstree", function (e, data) {
            data.inst.open_all(-1); // -1 opens all nodes in the container
        })
        .jstree({
            "json_data": {
                "ajax": {
                    "url": "http://localhost/eSiriusAjax/jqTOC.wc",
                    "aync": false,
                    "data": function (n) {
                        return { id: n.attr ? n.attr("id") : 0 };
                    }
                }
            },
            "core": { "html_titles": true },
            "themes": { "theme": "apple", "dots": false, "icons": false },
            "plugins": ["themes", "json_data", "checkbox"],
            "ui": { "select_limit": 1 }
        });

        $("#idTOC").bind('before.jstree', function (event, data) {
            if ((data.func === 'check_node') || (data.func === 'uncheck_node')) {
                event.stopImmediatePropagation(); //stops changing select/deselect when clicked
                return false;
            }
        });
    });

JSON data:

[
  {
    "data": "Intro",
    "attr": {
      "id": "1",
      "class": "jstree-checked",
      "href": "ProtocolIntro.aspx"
    }
  },
  {
    "data": "Overview",
    "attr": {
      "id": "3",
      "class": "jstree-unchecked",
      "href": "ProtocolOverview.aspx"
    }
  },
  {
    "data": "Funding",
    "attr": {
      "id": "5",
      "class": "jstree-checked"
    }
  },
  {
    "data": "Use TYPE(s)",
    "attr": {
      "id": "7",
      "class": "jstree-unchecked"
    }
  },
  {
    "data": "Transportation",
    "attr": {
      "id": "9",
      "class": "jstree-unchecked"
    }
  },
  {
    "data": "Dogs",
    "attr": {
      "id": "11",
      "class": "jstree-unchecked"
    },
    "children": [
      {
        "data": "Info",
        "attr": {
          "id": "12",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "# Justification",
        "attr": {
          "id": "13",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Choice Justification",
        "attr": {
          "id": "14",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Source",
        "attr": {
          "id": "15",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Enrichment/Excercise",
        "attr": {
          "id": "16",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Quarantine/Conditioning",
        "attr": {
          "id": "17",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Housing",
        "attr": {
          "id": "18",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Use Labs",
        "attr": {
          "id": "19",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Surgery",
        "attr": {
          "id": "20",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Procedures",
        "attr": {
          "id": "21",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Euthanasia",
        "attr": {
          "id": "22",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Methodology",
        "attr": {
          "id": "23",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "USDA Categories",
        "attr": {
          "id": "24",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Adverse Consq.",
        "attr": {
          "id": "25",
          "class": "jstree-unchecked"
        }
      }
    ]
  },
  {
    "data": "Mice",
    "attr": {
      "id": "26",
      "class": "jstree-unchecked"
    },
    "children": [
      {
        "data": "Info",
        "attr": {
          "id": "27",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "# Justification",
        "attr": {
          "id": "28",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Choice Justification",
        "attr": {
          "id": "29",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Source",
        "attr": {
          "id": "30",
          "class": "jstree-unchecked"
        }
   开发者_开发百科   },
      {
        "data": "Housing",
        "attr": {
          "id": "31",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Use Labs",
        "attr": {
          "id": "32",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Surgery",
        "attr": {
          "id": "33",
          "class": "jstree-checked",
          "href": "ProtocolSurgery.aspx"
        }
      },
      {
        "data": "Breeding",
        "attr": {
          "id": "34",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Methodology",
        "attr": {
          "id": "35",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "USDA Categories",
        "attr": {
          "id": "36",
          "class": "jstree-unchecked"
        }
      },
      {
        "data": "Adverse Consq.",
        "attr": {
          "id": "37",
          "class": "jstree-unchecked"
        }
      }
    ]
  },
  {
    "data": "Personnel",
    "attr": {
      "id": "38",
      "class": "jstree-checked",
      "href": "ProtocolPersonnel.aspx"
    }
  },
  {
    "data": "Database Searches",
    "attr": {
      "id": "40",
      "class": "jstree-unchecked"
    }
  },
  {
    "data": "Error Verification",
    "attr": {
      "id": "42",
      "class": "jstree-unchecked"
    }
  },
  {
    "data": "Preview",
    "attr": {
      "id": "44",
      "class": "jstree-unchecked"
    }
  },
  {
    "data": "Cancel Un-finished Protocol",
    "attr": {
      "id": "46",
      "class": "jstree-unchecked"
    }
  }
]


In the JSON data instead class="jstree-checked", you can send a custom attribute for example "checked" : "true" | "checked" : "false" .

Then in the ajax request add a complete callback, where you check all the elements having checked attribute set to "true".

"json_data": {
    "ajax": {
        "url": "http://localhost/eSiriusAjax/jqTOC.wc",
            "aync": false,
            "data": function (n) {
                    return { id: n.attr ? n.attr("id") : 0 };
            },
            "complete" : function() {
                    $('#idTOC li[checked=true]').each(function() {
                        $.jstree._reference('#idTOC').check_node(this);
                });         
            }
        }
}


this is works for me -

.bind("load_node.jstree", function (event, data) { 

                var productId = $("#Product_ProductId").val();
                if (!productId || productId < 1) {
                    data.inst.hide_checkboxes();
                } else
                    data.inst.change_state('li[selected=selected]', false);
            })

json data -

[{"data":{"title":"Electronics","icon":null},"metadata":{"id":3,"level":1,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"Folder Name","icon":null},"metadata":{"id":28,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[{"data":{"title":"New Category","icon":null},"metadata":{"id":29,"level":3,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]}]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":30,"level":2,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"File Name","icon":null},"metadata":{"id":31,"level":3,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"File Name","icon":null},"metadata":{"id":32,"level":4,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]}]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":33,"level":3,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"New Category","icon":null},"metadata":{"id":34,"level":4,"leaf":true,"mapId":13},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]}]}]}]},{"data":{"title":"Furniture","icon":null},"metadata":{"id":4,"level":1,"leaf":false,"mapId":0},"state":"closed","attr":{"id":null,"rel":"folder","href":null,"selected":false},"children":[{"data":{"title":"Folder Name","icon":null},"metadata":{"id":20,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]},{"data":{"title":"File Name","icon":null},"metadata":{"id":22,"level":2,"leaf":true,"mapId":14},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]},{"data":{"title":"File Name","icon":null},"metadata":{"id":25,"level":2,"leaf":true,"mapId":0},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":false},"children":[]},{"data":{"title":"Folder Name","icon":null},"metadata":{"id":26,"level":2,"leaf":true,"mapId":12},"state":"","attr":{"id":null,"rel":"default","href":null,"selected":true},"children":[]}]}]

add an 'selected' property into 'attr' object

0

精彩评论

暂无评论...
验证码 换一张
取 消