jQuery UI Widgets Forums Navigation Tree how to put checkboxes in tree with knockoutJS?

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • yonysun
    Member

    how to put checkboxes in tree with knockoutJS?

    I found however I write my code,I can’t made the checkbox display in tree

    <script type="text/javascript" defer="defer">
    $(document).ready(function () {
    var theme = 'darkblue';
    // Define a "Person" class that tracks its own name and children, and has a method to add a new child
    var Person = function (name, items) {
    this.label = name;
    this.items = ko.observableArray(items);
    this.enabled = ko.observable(true);
    this.addItem = function () {
    if (this.items().length < 4) {
    this.items.push("New Item");
    }
    else if (this.items().length == 4) {
    this.items.push("Last Item");
    this.enabled(false);
    }
    }
    }
    // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
    var viewModel = {
    theme:theme,
    people: [
    new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
    new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
    new Person("Charles", ["Cayenne", "Cleopatra"])
    ],
    disabled: ko.observable(false)
    };
    ko.applyBindings(viewModel);$('#tree').jqxTree({ checkboxes: true });
    $("#tree").jqxTree('expandAll');
    $('.btn').jqxButton({ theme: theme, width: '100px' });
    $("#treePanel").jqxPanel({width:'600',height:'500',theme:theme});
    });
    </script>
    </head>
    <body>
    <div id="institExpander" style="width:100%;height:100%;overflow: hidden;position: absolute;">
    <div style="width:100%;height:100%;overflow: hidden;">
    <div class="jqx-widget-header jqx-widget-header-darkblue jqx-expander-header-disabled jqx-expander-header-disabled-darkblue jqx-expander-header jqx-expander-header-darkblue"><img style="margin-left:10px;padding-right:5px;" src="images/tree.png"/>组织机构管理</div>
    <div>
    <div id="treePanel" style="float: left;">
    <div data-bind="jqxTree: {source: people, theme: theme}" id="tree"></div>
    </div>
    <div id="buttons" style="float: left;width:200px;">
    <button class="btn" >添加新节点</button>
    <button class="btn" >删除部门</button>
    <button class="btn">修改名称</button>
    </div>
    </div>
    </div>
    </div>

    I also overwrited my jqxknockout.js

    var v = new ko.jqwidgets.knockout({
    name: "jqxTree",
    source: null,
    disabled: false,
    checkboxes:false,
    reset: function() {
    this.disabled = false;
    this.source = null
    },
    getProperty: function(y, z, x) {},
    setProperty: function(x, y, z, A) {
    if (y == "source") {
    if (this.source != A) {
    this.source = A;
    x.host.jqxTree({
    source: A
    })
    }
    }
    if (y == "disabled") {
    if (A != this.disabled) {
    this.disabled = A;
    x.host.jqxTree({
    disabled: A
    })
    }
    }
    if (y == "checkboxes") {
    if (A != this.checkboxes) {
    this.checkboxes = A;
    x.host.jqxTree({
    checkboxes: A
    })
    }
    }
    }
    });

    who can help me?

    • This topic was modified 11 years, 1 month ago by  yonysun.
    • This topic was modified 11 years, 1 month ago by  yonysun.

    Peter Stoev
    Keymaster

    Hi,

    1. To use jqxTree with Checkboxes you should include jqxcheckbox.js in your project and set the “checkboxes” property of jqxTree to true.
    2. Please, take a look at the EULA before making any changes in the source code.

    Best regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    yonysun
    Member

    Thanks Peter.

    It works fine now.

    And I have to say sorry to overwrite the sound code without permission,

    I will notice the EULA and Follow the agreement.


    Peter Stoev
    Keymaster

    Hi,

    No problem and thanks for the update.

    Best regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.