1.创建combobox的方法
常用的一种是通过Js定义,一种是通过在input输入框中定义,还有一种通过在selete标签中定义,可以去看easyui的官方文档 http://www.jeasyui.net/plugins/169.html
补充:dataoptions是easyui的新特性,可以在里面定义属性,方法,样式等
2.掌握combobox的属性
去参考easyui的官方文档,这里对自己所用到的做一个总结
1.combobox有一个url属性,使用这个属性,后台方法传json数组过来即可
2.textField与valueField:后台在传 json数据过来之后,一个表示在combobox中显示的值,一个是提交表单存到数据库的值
3.设置组合框的值 $('#cc').combobox('setValue', '001');
4.设置组合框数组的值 $('#cc').combobox('setValues', ['001','002']);
5.清除组合框的值$('#cc').combobox('clear');
6.combobox如果不让它展示下拉框样式的话,设置hasDownArrow:false即可,
combobox让它高度自适应设置panelHeight:true即可
combobox实现可编辑editable:true
3.实现combobox级联
实现级联的方式有不少,自己用到的两种方式,这里记录easyui的方式,代码如下:
<div data-toggle="topjui-layout" data-options="fit:true"> <div data-options="region:'center',title:'',fit:true,border:false,bodyCls:'border_right_bottom'"> <div class="topjui-fluid"> <fieldset> <legend>子表基本信息</legend> </fieldset> <div class="topjui-row"> <div class="topjui-col-sm6"> <label class="topjui-form-label">器材代码</label> <input type="hidden" name="uuid"> <input type="hidden" name="c88"><input type="hidden" name="c00"> <div class="topjui-input-block"> <input type="text" name="c1" data-toggle="topjui-combobox" data-options="panelHeight:'auto',required:true,url:'Details/indexHandle.jsp?flags=queryC1', valueField:'c1',textField:'c1', onSelect:function(rec){ <!-- alert(rec.c0); --> $('[comboname=c2]').combobox('clear'); $('[comboname=c2]').combobox('reload','Details/indexHandle.jsp?flags=queryC2&c1='+rec.c1); $('[comboname=c3]').combobox('clear'); $('[comboname=c3]').combobox('reload','Details/indexHandle.jsp?flags=queryC3&c1='+rec.c1); $('[comboname=c5]').combobox('clear'); $('[comboname=c5]').combobox('reload','Details/indexHandle.jsp?flags=queryC5&c1='+rec.c1); $('[comboname=c6]').combobox('clear'); $('[comboname=c6]').combobox('reload','Details/indexHandle.jsp?flags=queryC6&c1='+rec.c1); } "> </div> </div> <div class="topjui-col-sm6"> <label class="topjui-form-label">器材名称</label> <div class="topjui-input-block"> <input type="text" name="c2" data-toggle="topjui-combobox" data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c2',valueField:'c2'"> </div> </div> </div> <div class="topjui-row"> <div class="topjui-col-sm6"> <label class="topjui-form-label">件号/规格</label> <div class="topjui-input-block"> <input type="text" name="c3" data-toggle="topjui-combobox" data-options="prompt:'请先选择器材代码',hasDownArrow:false,required:true,readonly:true,panelHeight:'auto',textField:'c3',valueField:'c3'"> </div> </div> <div class="topjui-col-sm6"> <label class="topjui-form-label">数量</label> <div class="topjui-input-block"> <input type="text" name=c4 data-toggle="topjui-numberspinner" data-options="maxLength:4,precision:2, required:true"> </div> </div> </div> <div class="topjui-row"> <div class="topjui-col-sm6"> <label class="topjui-form-label">计量单位</label> <div class="topjui-input-block"> <input type="text" name="c5" data-toggle="topjui-combobox" data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c5',valueField:'c5'"> </div> </div> <div class="topjui-col-sm6"> <label class="topjui-form-label">参考单价</label> <div class="topjui-input-block"> <input type="text" name="c6" data-toggle="topjui-combobox" data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c6',valueField:'c6'"> </div> </div> </div> <div class="topjui-row"> <div class="topjui-col-sm6"> <label class="topjui-form-label">单装名称</label> <div class="topjui-input-block"> <input type="text" name="c8" data-toggle="topjui-combobox" data-options="panelHeight:'auto',required:true,url:'Details/indexHandle.jsp?flags=queryC8', valueField:'c8',textField:'c8', onSelect:function(rec){ <!-- alert(rec.c0); --> $('[comboname=c9]').combobox('clear'); $('[comboname=c9]').combobox('reload','Details/indexHandle.jsp?flags=queryC9&c8='+rec.c8); } "> </div> </div> <div class="topjui-col-sm6"> <label class="topjui-form-label">单装编号</label> <div class="topjui-input-block"> <input type="text" name="c9" data-toggle="topjui-combobox" data-options="panelHeight:'auto',prompt:'请先选择单装名称',hasDownArrow:false,required:true,readonly:true,valueField:'c9',textField:'c9'"> </div> </div> </div> <div class="topjui-row"> <div class="topjui-col-sm12"> <label class="topjui-form-label">是否在质保期</label> <div class="topjui-input-block"> <input type="text" name="c10" data-toggle="topjui-combobox" data-options="required:true,panelHeight:'auto',textField:'text',valueField:'text',url:'../common/isDefind.json'"> </div> </div> </div> </div> </div> </div>
效果如下:当选择完器材代码之后,自动填充一系列数据。。。我在后台传json的时候还传了个selected:true过来,如果要实现像省市区那样的级联就不用传selected:true了
补充:
1、为combobox指定name后,经过easyUI自己解析后,生成的combobox(也就是select)没有name这个属性,
取而代之的是comboname,因为name要作为input的name。所以要根据name得到combobox要使用comboname