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>

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

  效果展示

html

js

EasyUI中文网:http://www.jeasyui.cn

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

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

原文地址:https://www.cnblogs.com/xvpindex/p/10975390.html

时间: 2024-11-13 09:16:28

jQuery EasyUI/TopJUI创建树形表格下拉框的相关文章

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自己太懒(对自己不是很熟悉的东西是不愿意第一去看的).结果选择良久,还是jquery easyui treegrid这个例子自己看起来比较熟悉.于是就专心研究了,从官方网站http://www.jeasyui.net/下载了demo,开始研读.先把jsp页面一些代码贴出 <link rel="s

EasyUI 34-ComboGrid(数据表格下拉框)组件

Jquery制作--美化下拉框

平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div里面隐藏着,方便后台开发人员对其进行操作.效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <tit

美化select下拉框

直接上干货: 需要的材料: change_select.js (文末会给出下载地址) 使用方法: 1.调用方法:<script type="text/javascript" >    $(function(){        $("select").selectCss();    })</script> *使用时必须引用jquery $("select")是选取所有的下拉框,根据自己实际情况更改. 2.调整样式:/*下拉框

最完美的select下拉框美化

很多人为 select 的诸多不完善而头痛,如无法自定义样式. IE6 中无法被浮动层遮住等等.下面介绍一款堪称最完美的下拉框组件: UU 人下拉框 特点 1 :美化的并且可自定义的外观 UU 人下拉框使用 JS 进行渲染.当页面引入了脚本和 CSS 后,页面中的下拉框都会变成如下外观:精心开发5年的UI前端框架! 该外观是由 CSS 和图片控制.通过修改 CSS 可以很方便地实现更改外观. UU 人下拉框不存在 IE6 中无法被浮动层遮住等问题. 特点 2 :使用简单 UU 人下拉框代码写法与

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

Jquery EasyUI环境下设置下拉框选中指定选项

前提: 要求点击某个按钮就将所有的下拉框都设置为选中第一个选项,因此,指定索引是最好的做法 尝试过的做法: html代码如下(easyui 的写法) <select class="easyui-combobox"  name="query_1" id="query_1"> <option value="test1">测试1</option> <option value="te