jQuery EasyUI / TopJUI create a tree table drop-down box

jQuery EasyUI / TopJUI create a tree table drop-down box

The first method (pure HTML creation)

 <div class="topjui-row">
        <div class="topjui-col-sm12">
            <label class="topjui-form-label">组织机构</label>
            <div class="topjui-input-block">
                <input name="org" data-toggle="topjui-combotreegrid"
                       data-options="labelPosition:'top',
                   url:remoteHost+'/mdata/organization/getListByLevelId?levelId=1',
                   expandUrl:remoteHost+'/mdata/organization/getListByPid?pid={id}',
                   idField:'id',
                   treeField:'text',
                   columns:[[ 
                       {Field: 'LevelID', title: 'level'}
                       {Field: 'text', title: 'name means'},
                       {Field: 'Leader', title: 'person in charge'},
                   ]]">
            </div>
        </div>
    </div>

　　The second method (js)

html

<div class="topjui-row">
        <div class="topjui-col-sm12">
            <label class="topjui-form-label">组织机构</label>
            <div class="topjui-input-block">
                <input type="text" id="org2" name="org2">
            </div>
        </div>
    </div>

　　js

$(function () {
        $('#org2').iCombotreegrid({
            labelPosition: 'top',
            url: remoteHost + '/mdata/organization/getListByLevelId?levelId=1',
            expandUrl: remoteHost + '/mdata/organization/getListByPid?pid={id}',
            idField: 'id',
            treeField: 'text',
            columns: [[
                {field: 'text', title: '机构名称'},
                {field: 'leader', title: '负责人'},
                {field: 'levelId', title: '层级'}
            ]]
        });
    });

　　Show results

 

html

 

 js

 

 

EasyUI Chinese network: http://www.jeasyui.cn

TopJUI前端框架：http://www.topjui.com

 TopJUI交流社区：http://ask.topjui.com