Как инициализировать jsTree, используя JSON? - PullRequest
Новая
       25

Как инициализировать jsTree, используя JSON?

0 голосов
/ 22 сентября 2019

Когда я заполняю данные и дочерний узел, treejs неверен, и мой главный узел стал дочерним, и какой-то узел автоматически проверяется при инициализации

Сначала я помещаю расположение данных в Init Angular, затем я понимаю,возможно, данные задерживаются при рендеринге древовидной структуры, поэтому я изменяю их, чтобы перезагрузить древовидную структуру, чтобы данные уже были упорядочены, а затем загрузили treejs с полными данными

Angular JS 

$s.Data = [];
$s.Section = ret.Section;
$s.Menu = ret.Menu;
$s.MenuSub = ret.MenuSub;
//Menu Children
$s.MenuChildren = (function (menu) {
    var ret = [];
    Enumerable.From($s.Menu).Where(function (x) { return x.Section.toUpperCase() === menu; }).ForEach(function (x) {
        ret.push({
            id: x.ID,
            text: x.NameEN.toUpperCase(),
            type: "menu",
            state: null,
            children: null
        });
    });
    return ret;
});
//Main Node
Enumerable.From($s.Section).ForEach(function (sec) {
    $s.Data.push({
        id: sec.ID,
        text: sec.NameEN.toUpperCase(),
        type: "section",
        state: null,
        children: $s.MenuChildren(sec.Section.toUpperCase()) //Call Function MenuChildren
    });
});

Этофункция нажатия кнопки 

  $s.LoadTreeView = (function () {
        console.log(JSON.stringify($s.Data));
        $('#usergroup_treeview').jstree({
            'core': {
                "check_callback": true,
                'data': $s.Data
            },
            "plugins": ["checkbox", "types"],
            "types": {
                "section": {
                    "icon": "/Resources/CSS/Hash.png"
                },
                "menu": {
                    "icon": "/Resources/CSS/Menu.png"
                },
                "default": {
                    "icon": "/Resources/CSS/Menu.png"
                }
            }
        });
    });

HTML 

<div class="col-lg-8">
    <div class="card m-b-20">
        <div class="card-body panel-right-ug">
            <h4 class="mt-0 header-title">Range validation</h4>
            <div class="container container-right-ug">
                <div class="form-group">
                    <div class="text-right">
                        <button type="submit" class="btn btn-info waves-effect waves-light" ng-click="LoadTreeView()">REFRESH</button>
                    </div>
                </div>
                <div id="usergroup_treeview"></div>
            </div>
        </div>
    </div>
</div>

Данные JSON 

[{"id":1,"text":"LEAVE REQUEST","type":"section","state":null,"children":
    [{"id":1,"text":"APPLICATION FOR LEAVE","type":"menu","state":null,"children":null},
     {"id":2,"text":"CANCELLATION OF LEAVE","type":"menu","state":null,"children":null},
     {"id":3,"text":"SICK LEAVE REQUEST","type":"menu","state":null,"children":null}]},
     {"id":12,"text":"LEGAL AND INSURANCE","type":"section","state":null,"children":
         [{"id":59,"text":"DOCUMENT MAINTENANCE","type":"menu","state":null,"children":null},
          {"id":60,"text":"TRADE LICENSE AND INSURANCE","type":"menu","state":null,"children":null},
          {"id":61,"text":"TRAFFIC DEPARTMENT NOC REQUEST","type":"menu","state":null,"children":null},
          {"id":62,"text":"OVERNIGHT PERMIT NOC REQUEST","type":"menu","state":null,"children":null},
          {"id":63,"text":"REQUEST TO LEGAL FOR AN EVENT","type":"menu","state":null,"children":null},
          {"id":101,"text":"INCIDENT REPORT","type":"menu","state":null,"children":null}]},
          {"id":7,"text":"MEDICAL INSURANCE","type":"section","state":null,"children":
               [{"id":39,"text":"LIFE INSURANCE BENEFICIARY","type":"menu","state":null,"children":null},
                {"id":40,"text":"DEPENDENTS INSURANCE","type":"menu","state":null,"children":null},
                {"id":41,"text":"MEDICAL CLAIM (ALICO)","type":"menu","state":null,"children":null}]
       },
       {"id":2,"text":"ATTENDANCE","type":"section","state":null,"children":
            [{"id":111,"text":"TIME IN AND TIME OUT FORM","type":"menu","state":null,"children":null},
             {"id":112,"text":"CHANGE OF SCHEDULE FORM","type":"menu","state":null,"children":null}]
   },{"id":13,"text":"SUPPLY AND DISTRIBUTION","type":"section","state":null,"children":
         [{"id":64,"text":"DISTRIBUTION CENTER VISIT","type":"menu","state":null,"children":null}]
   },{"id":8,"text":"TRAVEL REQUEST","type":"section","state":null,"children":[{"id":42,"text":"BUSINESS TRAVEL","type":"menu","state":null,"children":null},{"id":43,"text":"BUSINESS EXPENSE LIQUIDATION","type":"menu","state":null,"children":null},{"id":44,"text":"BUSINESS TRAVEL EXPENSE LIQUIDATION","type":"menu","state":null,"children":null},{"id":45,"text":"LPO","type":"menu","state":null,"children":null},{"id":92,"text":"PETTY CASH","type":"menu","state":null,"children":null},{"id":93,"text":"LIQUIDATION REPORT","type":"menu","state":null,"children":null},{"id":96,"text":"LIQUIDATION MAINTENANCE","type":"menu","state":null,"children":null},{"id":100,"text":"RETAIL PETTY CASH","type":"menu","state":null,"children":null}]},{"id":14,"text":"GIFT VOUCHER AND E-STORE","type":"section","state":null,"children":[{"id":65,"text":"GIFT VOUCHER REQUEST","type":"menu","state":null,"children":null},{"id":66,"text":"E-STORE","type":"menu","state":null,"children":null},{"id":67,"text":"E-STORE (SELL ITEM)","type":"menu","state":null,"children":null},{"id":68,"text":"PROMOTIONS","type":"menu","state":null,"children":null}]},{"id":3,"text":"CASH ADVANCE AND STORE BANKING","type":"section","state":null,"children":[{"id":4,"text":"CASH ADVANCE REQUEST","type":"menu","state":null,"children":null},{"id":5,"text":"IBAN INFORMATION","type":"menu","state":null,"children":null},{"id":6,"text":"STORE BANKING","type":"menu","state":null,"children":null},{"id":7,"text":"STORE BANKING (FOR COLLECTION)","type":"menu","state":null,"children":null},{"id":8,"text":"STORE BANKING ADMIN","type":"menu","state":null,"children":null}]},{"id":9,"text":"DELIVERY","type":"section","state":null,"children":[{"id":46,"text":"HEAD OFFICE TO SHOP|WAREHOUSE","type":"menu","state":null,"children":null},{"id":47,"text":"SHOP|WAREHOUSE TO HEAD OFFICE","type":"menu","state":null,"children":null},{"id":48,"text":"DELIVERY TRACKING","type":"menu","state":null,"children":null},{"id":49,"text":"SEND DOCUMENTS","type":"menu","state":null,"children":null},{"id":50,"text":"CONFIRM DELIVERY","type":"menu","state":null,"children":null},{"id":51,"text":"ADMIN","type":"menu","state":null,"children":null},{"id":52,"text":"DRIVER CONFIRMATION","type":"menu","state":null,"children":null},{"id":53,"text":"RECIPIENT PAGE","type":"menu","state":null,"children":null},{"id":54,"text":"HO DELIVERY","type":"menu","state":null,"children":null},{"id":55,"text":"RECIPIENT PAGE","type":"menu","state":null,"children":null}]},{"id":10,"text":"LETTERS AND PASSPORT","type":"section","state":null,"children":[{"id":56,"text":"LETTER REQUEST","type":"menu","state":null,"children":null},{"id":57,"text":"PASSPORT REQUEST","type":"menu","state":null,"children":null},{"id":58,"text":"ID REQUEST","type":"menu","state":null,"children":null},{"id":97,"text":"EXTERNAL EVENT FORM","type":"menu","state":null,"children":null}]},{"id":15,"text":"AUDIT","type":"section","state":null,"children":[{"id":69,"text":"CASH MANAGEMENT","type":"menu","state":null,"children":null},{"id":70,"text":"STOCK MANAGEMENT","type":"menu","state":null,"children":null},{"id":71,"text":"PROCUREMENT","type":"menu","state":null,"children":null},{"id":88,"text":"PUBLISH WEBSITE","type":"menu","state":null,"children":null}]},{"id":4,"text":"RECRUITMENT","type":"section","state":null,"children":[{"id":9,"text":"OFFER LETTER REQUEST","type":"menu","state":null,"children":null},{"id":26,"text":"POSITION REQUISITION FORM","type":"menu","state":null,"children":null},{"id":27,"text":"EMPLOYEE TRANSFER","type":"menu","state":null,"children":null},{"id":28,"text":" EMPLOYEE PROMOTION (RETAIL SUPPORT)","type":"menu","state":null,"children":null},{"id":29,"text":"EMERGENCY FUND CONTRIBUTION","type":"menu","state":null,"children":null},{"id":30,"text":"EMERGENCY FUND CLAIM","type":"menu","state":null,"children":null},{"id":31,"text":"EMERGENCY FUND (OPT OUT)","type":"menu","state":null,"children":null},{"id":94,"text":"EMPLOYEE SALARY INCREASE ","type":"menu","state":null,"children":null},{"id":105,"text":"SEASONAL HIRING ","type":"menu","state":null,"children":null}]},{"id":5,"text":"RETAIL","type":"section","state":null,"children":[{"id":32,"text":"AM STORE VISIT","type":"menu","state":null,"children":null},{"id":33,"text":"RETAIL TIME IN LIEU (WITHOUT PAY)","type":"menu","state":null,"children":null},{"id":34,"text":"RETAIL OVERTIME FORM (WITH PAY)","type":"menu","state":null,"children":null},{"id":35,"text":"NOTIFICATION OF RESIGNATION","type":"menu","state":null,"children":null},{"id":36,"text":"UNIFORM ORDERING","type":"menu","state":null,"children":null},{"id":37,"text":"EMPLOYEE PROMOTION (SA-SM)","type":"menu","state":null,"children":null},{"id":38,"text":"STOP ACTIVE SALARY","type":"menu","state":null,"children":null},{"id":89,"text":"SALARY DEDUCTION","type":"menu","state":null,"children":null}]},{"id":11,"text":"MANUAL FORMS","type":"section","state":null,"children":[]},{"id":16,"text":"DIRECTOR BENEFITS","type":"section","state":null,"children":[{"id":106,"text":"DIRECTORS ONLINE BENEFITS CLAIM - CHILD CARE SUPPORT","type":"menu","state":null,"children":null},{"id":107,"text":"DIRECTORS ONLINE BENEFITS CLAIM - CHILD EDUCATION ALLOWANCE","type":"menu","state":null,"children":null},{"id":108,"text":"CHILD CARE SUPPORT (FINANCE DEPARTMENT)","type":"menu","state":null,"children":null},{"id":109,"text":"CHILD EDUCATION ALLOWANCE (FINANCE DEPARTMENT)","type":"menu","state":null,"children":null},{"id":110,"text":"DIRECTOR SECTION","type":"menu","state":null,"children":null}]},{"id":6,"text":"GAZELLE","type":"section","state":null,"children":[]}]
...