最近的项目在用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
miniui之treeSelect遇到的坑
猜你喜欢
转载自blog.csdn.net/oncemore520/article/details/80447483
今日推荐
周排行