miniui之treeSelect遇到的坑

    最近的项目在用miniui,对于这个ui框架自己一直没有接触过,以前做项目只是简单的用了bootstrap和bootstrapTable这类的ui框架,所以新用的这个,自己确实遇到了一些坑。
    1.首先是这样的需求
  ![这里写图片描述](https://img-blog.csdn.net/20180525102914426?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29uY2Vtb3JlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70.jpg)
    省级和市级分开,但是选择省级后市级就不可以再次选择。以前她们封装了一套。是这样的
    (https://img-blog.csdn.net/20180525101329287?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29uY2Vtb3JlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
    代码:
    <input id="lookup_region" name="region_id" class="mini-lookup mini-textbox" allowInput="false"
       valueField="code" textField="fulltitle" popupWidth="auto" popup="#gridPanel_region" grid="#datagrid_region"/>

<div id="gridPanel_region" class="mini-panel" title="header" iconCls="icon-add" style="width:350px;height:300px;"
     showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0;" borderStyle="border:0">
    <div property="toolbar" class="lookuptoolbar">
        <div style="float:left;padding-bottom:2px;">
            <span>查找:</span>
            <input id="keyText_region" class="mini-textbox" style="width:150px;" onenter="onSearchClick_region"/>
            <a class="mini-button input-bt" onclick="onSearchClick_region" plain="true">查询</a>
        </div>
        <div style="float:right;padding-bottom:2px;">
            <a class="mini-button input-bt" onclick="onClearClick_region" plain="true">清除</a>
            <a class="mini-button input-bt" onclick="onCloseClick_region" plain="true">确认</a>
        </div>
        <div style="clear:both;"></div>
    </div>

    <div id="datagrid_region" class="mini-treegrid" style="width:100%;height:100%;" borderStyle="border:0"
         showPageSize="false" showPageIndex="false" url="/loadnode/?method=region"
         showTreeIcon="true" resultAsTree="false"  allowResize="true" idField="code" parentField="parent" treeColumn="diming">
        <div property="columns">
            <div type="checkcolumn"></div>
            <div name="diming" field="name" width="100">地名</div>
            <div field="level" width="20">级别</div>
        </div>
    </div>
</div>

她们用的lookup模板。
但是我的需求并不是那样的,于是我自己把请求过来的数据放在一个js文件里边,稍微改变了表现形式:
![这里写图片描述](https://img-blog.csdn.net/20180525101735828?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29uY2Vtb3JlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
直接用loadlist来加载数据
 //市区联动
        function onProvinceChanged(e) {
            mini.parse()
            var province = mini.get('local_select');
            var city = mini.get('cprovince');
            var local = mini.get('local_select').getValue();
            mini.get('cprovince').setValue('');
            var url = '';
            if (local == 'province') {
                $('#spProvince').text('省级')
                city.loadList(provinceList, 'id', 'parent')
            } else if (local == 'city') {
                 $('#spProvince').text('市级')
                city.loadList(list, 'id', 'parent')
            }

            // city.setUrl(url)
        }
id和parent一定要对应好,当用setValue的时候,一定要传对值,我的是这样的:
         <input id="local_select" class="mini-combobox" style="width:150px;"
                                               textField="name" valueField="id" value="省级"
                                               onvaluechanged="onProvinceChanged"
                                               data='[{"name":"省级","id":"province"},{"name":"市级","id":"city"}]'
                                               showNullItem="false"
                                        />
                                        <input id="cprovince" name="cprovince" class="mini-treeselect"
                                               emptyText="为空表示全选" onvaluechanged="onProvinceChangedLocal"
                                               multiSelect="false" textField="name" valueField="code"
                                               parentField="parent" showFolderCheckBox="true"
                                               checkRecursive="true" onbeforenodeselect="beforenodeselect"
                                                {#                                               autoCheckParent="true"#}
                                               expandOnLoad="true" showClose="true"
                                               oncloseclick="onCloseClick" popupWidth="200"
                                        />
子对象的parent字段要和父对象的id字段保持一致。我的valueField是code,所以当我要setValue的时候一定要传code值。多选和单选的标识是mulitple

猜你喜欢

转载自blog.csdn.net/oncemore520/article/details/80447483