树形下拉框实现 miniui treeselect


<input id="test" name="test" class="mini-treeselect" url="../data/tree.txt" valueField="id" textField="text" parentField="PId" allowInput="true" virtualScroll="true" 
onbeforenodeselect="onbeforenodeselect" expandOnLoad="0" showFolderCheckBox="true" valueFromSelect="true" popupWidth="200px" popupHeight="280px" showClose="true"
oncloseclick="onCloseClick"/>
js代码
function
onbeforenodeselect(e){
  //禁止选中父节点
  if(e.isLeaf==false)e.cancel=true;
}
function onCloseClick(e){
  //清空下拉树或下拉框
  var obj=e.sender;
  obj.setText("");
  obj.setValue("");
}
 

mini-treeselect 设置下拉宽度:popupWidth="200px" ,设置下拉高度:popupHeight="250px",比如高度阈值为250,当设置为280,但是展示的效果还是设置的250,那么可以使用css样式来改动了。

<style type="text/css">
      .min-popup{
             min-height:280px !important;
        }
       .min-panel{
             min-height:280px !important;
        }
</style>
allowInput:可以输入,并模糊查询。
virtualScroll:虚拟模式,适合于大数据显示场合。意思就是如果数据量比较大,可以使用这个控件分批加载。
expandOnLoad:0 展开第一级节点
showFolderCheckBox:显示父节点的checkbox
valueFromSelect:必须从选择项中录入

当使用 mini-treegrid时,id="datagrid1",需要注意会向后台有两次请求,第一次不带参数,第二次带参。url可以设置为空。
解决方法:mini.parse();
var grid=mini.get("datagrid1");
var form=new mini.Form("form");
在search方法里使用
var o=form.getData();//可以获取到form表单中表单数据,但是必须都要带name。
grid.setAjaxOption({data:o});
grid.setUrl("") 后台url请求拦截地址,就是查询按钮。

当使用mini-datagrid时,请求后台可以使用:
grid.load(o,function(){
  var tableRows=grid.getData().length;//获取查询的条数
  if(tableRows<1){
    mini.alert("没有查询到数据!");
  }
  mini.unmask();//隐藏遮罩
})
其余的可以参考http://www.miniui.com/docs/api/index.html#ui=treeselect

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM