easyui enableFilter combobox级联 combotree

//网格过滤
function datagridFilter(dg) {
    dg.datagrid('enableFilter');
    dg.datagrid('enableFilter', [{
        field: 'townName',
        type: 'combobox',
        options: {
            url: 'area/getAreas.action?type=2&parentCode=330106',
            valueField: 'code',
            textField: 'name',
            onChange: function (value) {
                //刷新数据,重新读取省份下的城市,并清空当前输入的值
                var component = dg.datagrid('getFilterComponent', 'villageName');
                component.combobox('reload', 'area/getAreas.action?type=2&parentCode=' + value);
                if (value == '') {
                    dg.datagrid('removeFilterRule', 'townName');
                } else {
                    dg.datagrid('addFilterRule', {
                        field: 'townName',
                        op: 'equal',
                        value: value
                    });
                }
                dg.datagrid('doFilter');
            },
            onLoadSuccess: function () {
                var component = dg.datagrid('getFilterComponent', 'townName');
                var component1 = dg.datagrid('getFilterComponent', 'villageName');
                if (tvCode.length > 0) {
                    if (tvCode.length == 9) {
                        component.combobox('setValue', tvCode);
                        component1.combobox('reload', 'area/getAreas.action?type=2&parentCode=' + component.combobox('getValue'));
                    } else {
                        component.combobox('setValue', tvCode.substring(0, 9));
                        component1.combobox('reload', 'area/getAreas.action?type=2&parentCode=' + component.combobox('getValue'));
                        component.combobox('readonly', "true");
                    }
                } else {
                    if (areaCode.length == 9) {
                        component.combobox('setValue', areaCode);
                        component.combobox('readonly', "true");
                        component1.combobox('reload', 'area/getAreas.action?type=2&parentCode=' + component.combobox('getValue'));
                    } else if (areaCode.length == 12) {
                        component.combobox('setValue', $("#areaCode").val().substring(0, 9));
                        component1.combobox('reload', 'area/getAreas.action?type=2&parentCode=' + component.combobox('getValue'));
                        component.combobox('readonly', "true");
                    } else {
                        dg.datagrid('doFilter');
                    }
                }
            }
        }
    },
    {
        field: 'villageName',
        type: 'combobox',
        options: {
            //url:'area/getAreas.action?type=2&parentCode=330106',
            valueField: 'code',
            textField: 'name',
            onChange: function (value) {
                //刷新数据,重新读取省份下的城市,并清空当前输入的值
                if (value == '') {
                    dg.datagrid('removeFilterRule', 'villageName');
                } else {
                    dg.datagrid('addFilterRule', {
                        field: 'villageName',
                        op: 'equal',
                        value: value
                    });
                }
                dg.datagrid('doFilter');
            },
            onLoadSuccess: function () {
                var component = dg.datagrid('getFilterComponent', 'villageName');
                var value = component.combobox('getValue');
                if (tvCode.length == 12) {
                    component.combobox('setValue', tvCode);
                }
                if (areaCode.length < 12) {
                    dg.datagrid('addFilterRule', {
                        field: 'villageName',
                        op: 'equal',
                        value: value
                    });
                } else if (areaCode.length > 9) {
                    component.combobox('setValue', areaCode);
                    component.combobox('readonly', "true");
                    dg.datagrid('addFilterRule', {
                        field: 'villageName',
                        op: 'equal',
                        value: value
                    });
                }
            }
        }
    }]);
}



/**
*使用combotree 示例
*/
dg.datagrid('enbaleFilter',
    [{
        field: 'departmentName',
        type: 'combotree',
        options: {
            panelHeight: 'auto',
            multiple: true,
            url: 'commonaction/queryDepartmentorgTreeData.action',
            onLoadSuccess: function () {
                var component = dg.datagrid('getFilterComponent', 'departmentName');
                component.combotree('setValue', 4);
            },
            onChange: function (value) {
                //var component = dg.datagrid('getFilterComponent', 'departmentName');
                //var value=component.combotree('getValue');
                dg.datagrid('addFilterRule', {
                    field: 'departmentName',
                    op: 'equal',
                    value: value
                });
                dg.datagrid("doFilter");
            }
        }
    }, {
        field: 'projectName',
        type: 'combotree',
        options: {
            url: "authorization/getProjectTreeByAccountId.action?accountId=" + $("#accountId").val(),
            panelHeight: "auto",
            editable: false, //不允许手动输入
            multiple: true,
            cascadeCheck: true,
            onLoadSuccess: function (data) { //数据加载完毕事件
                var component = dg.datagrid('getFilterComponent', 'projectName');
                var data = component.combotree('tree').tree("getRoots");
                if (data.length > 0) {
                    component.combotree('tree').tree("check", data[0].target);//('select', data[0].target);
                }
            },
            onChange: function (value) {
                //var component = dg.datagrid('getFilterComponent', 'projectName');
                //var data = component.combotree('tree').tree("getRoots");
                //if (data.length > 0) {
                //    component.combotree('tree').tree("check",data[0].target);//('select', data[0].target);
                //}
                var value = component.combotree('getValue');
                dg.datagrid('addFilterRule', {
                    field: 'projectName',
                    op: 'equal',
                    value: value,
                });
                dg.datagrid("doFilter");
            }
        }
    }]);


文章转自:http://www.cnblogs.com/ckaifeng/p/5006569.html

转载于:https://www.cnblogs.com/apollokk/p/6713799.html

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Combotreeeasyui 中的一个组件,它可以同时显示树形结构和下拉框,可以方便地选择树形结构中的节点。下面是 combotree 的使用记录: 1. 引入 easyui 的 css 和 js 文件: ```html <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/icon.css"> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/jquery.easyui.min.js"></script> ``` 2. 在 HTML 中添加 combotree 组件: ```html <input id="tree" class="easyui-combotree" style="width:200px;"> ``` 3. 初始化 combotree 组件: ```javascript $('#tree').combotree({ url: 'tree_data.json', // 树形结构数据的 URL method: 'get', // 数据请求方式 required: true, // 是否必填 panelHeight: 'auto', // 下拉框高度 multiple: true, // 是否允许多选 checkbox: true, // 是否显示复选框 onlyLeafCheck: true, // 是否只允许选择叶子节点 onLoadSuccess: function(node, data) { // 数据加载完成后的回调函数 console.log('load tree data success.'); } }); ``` 4. tree_data.json 文件内容如下: ```json [{ "id": 1, "text": "Node 1", "children": [{ "id": 11, "text": "Node 1.1" },{ "id": 12, "text": "Node 1.2" }] },{ "id": 2, "text": "Node 2", "children": [{ "id": 21, "text": "Node 2.1" },{ "id": 22, "text": "Node 2.2", "children": [{ "id": 221, "text": "Node 2.2.1" },{ "id": 222, "text": "Node 2.2.2" }] }] }] ``` 5. 运行代码后,会显示一个下拉框,点击下拉框会显示树形结构。可以选择节点,也可以多选。 以上就是 combotree 的使用记录,希望对你有帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值