初尝easyui
虽然以前做过很长时间的web,但是easyui却是从来没有用过,这次是花姑娘上花轿-头一遭。事情是这样的:前几天接手同事做的一个web项目,里面用到了部分easyui的控件,在属性的设置上有些缺失,故花了点时间浅尝了下easyui,做些风险储备。
1、ComboBox
这个控件很常用,easyui做了很不错的封装,基本上可以满足我们对下拉框的需求
上面的图片展示了下拉框的常用场景:
1、固定值
2、动态加载
<input class="easyui-combobox"
data-options="valueField:'ID',textField:'Name',url:'@Url.Content("~/Common/InitData")',editable: false " id = "romoteData" name = "romoteData"/>
URL:标明下数据来源即可,上面是在MVC中使用的方式,需要注意的是editable 这个属性,它可以使当前的下拉框处于只读状态,禁止用户的输入,在很多场景下这个很重要哦。
3、联动
这个就更加常用了,可以所在所有的项目中都是无可回避的,使用方式也很简单
$("#ProvinceId").combobox({ onChange:function (newvalue,oldvalue) { var url="@Url.Content("~/Common/InitProvinceCity")"+"/"+newvalue; $("#CityId").combobox({ url:url, valueField : 'CityId', textField : 'CityName', onLoadSuccess:function() { if($("#Select_CityId").val()!="") { $.each( $("#CityId").combobox("getData"),function(i,v){ if(v.CityId==$("#CityId0").val()) $("#CityId").combobox("select",$("#Select_CityId").val()); }); } } }); } });
其中ProvinceId和CityID用页面上的两个下拉框,easyui提供了多种方式来使用combobox,具体的可以参考easyui的官网,上面有很详尽的说明。
4、多选
这个算比较偏门,但是使用场景也还是有的,这里也列出来吧:
<input class="easyui-combobox"
data-options="valueField:'ID',textField:'Name',url:'@Url.Content("~/Common/InitData")', multiple:true,panelHeight:'auto',editable:false"
id = "romoteData2" name = "romoteData2"/>
只要设置multiple:true就可以,很方便,这里多设置了个属性panelHeight:auto,注重细节的童鞋会用的到,当项目很少的时候,默认的下拉面板过长,不太美观,这个属性就派上用场了
5、分组
这个就不用说了吧,要自己来实现还是要费上些力气的
<input class="easyui-combobox"
data-options="valueField:'ID',textField:'Name',url:'@Url.Content("~/Common/InitData")/1', groupField:'group',panelHeight:'auto'"
id = "romoteData3" name = "romoteData3"/>
属性又多设置一个groupFiled,这个需要在提供的数据中提供,easyui接受标准的json格式的数据。
上面都是展现控件,下面简单说下如何来取值:很简单,easyui提供了很方便的接口
//设置默认选中值 var SetSelectValue = function () { $("#romoteData").combobox("setValue", "1");//一般赋值 $("#romoteData2").combobox("setValues", "13");//多选赋值 } function ShowValues() { alert($("#romoteData").combobox("getValue"));//取值 }
var _t=false;
//将页面所有的combobox设置为只读 var SetReadOnly=function(){ $(".easyui-combobox").each(function () { $(this).combobox({ editable: _t//设置下拉框只读 }); }); _t=!_t; }
今天又瞄了眼easyui的官网,发现一个combobox的使用,让我怀念起做桌面程序的样子,这里加一下
就是上面的样子,一个下拉框,里面的选项是个列表,这样可以展示更多的信息给用户,以前在做桌面程序的时候用过不好,很喜欢这种风格,她的使用方式也很简单,这里就直接贴代码了:
<select class="easyui-combogrid" id="cc" name="cc" value="C#" style="width:200px" data-options=" panelWidth: 200, idField: 'ID', multiple: false, textField: 'Name', url: '@Url.Content("~/Common/InitData")', method: 'post', editable: false, columns: [[ @* {field:'ck',checkbox:true},*@ {field:'ID',title:'ID'}, {field:'Name',title:'名称'}, {field:'group',title:'group'} ]], fitColumns: true "> </select>
如果想要多选,就在前边加上一个复选框设置属性multiple: true,放开列设置中的注释行就可以了,取值和赋值用JS来操作,直接看下面的代码吧,相信大家都能明白:
var SetComboValues=function()
{
//$('#cc').combogrid('setValues', '13');
//$('#cc').combogrid('setText', 'C#,F#');
alert($('#cc').combogrid('getValues'));
}