jQuery EasyUI/TopJUI创建树形表格下拉框

Posted 2021-12-20 xvpindex

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery EasyUI/TopJUI创建树形表格下拉框相关的知识，希望对你有一定的参考价值。

第一种方法（纯html创建）

 <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:‘text‘,title:‘机构名称‘,
                       field:‘leader‘,title:‘负责人‘,
                       field:‘levelId‘,title:‘层级‘
                   ]]">
            </div>
        </div>
    </div>

　　第二种方法（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>

$(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: ‘层级‘
            ]]
        );
    );

　　效果展示

技术图片