初尝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'));
}
初尝easyui的更多相关文章
- 初尝Windows 下批处理编程
本文叫“ 初尝Windows 下批处理编程”是为了延续上一篇“初尝 Perl”,其实对于博主而言批处理以及批处理编程早就接触过了. 本文包括以下内容 1.什么是批处理 2.常用批处理命令 3.简介批处 ...
- 初尝 Perl
本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...
- seajs初尝 加载jquery返回null解决学习日志含示例下载
原文地址:http://www.tuicool.com/articles/bmuaEb 如需demo示例,请点击下方链接下载: http://yunpan.cn/cVEybKs8nV7CF 提取码 ...
- .NET领域驱动设计—初尝(三:穿过迷雾走向光明)
开篇介绍 在开始这篇富有某种奇妙感觉的文章之旅时我们先短暂的讨论一下关于软件开发方法论的简要: 纵观软件开发方法论,从瀑布模型.螺旋模型.RUP(统一软件开发过程).XP(极限编程).Agile(敏捷 ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 分布式设计《初尝memcached》
之前听说过高性能的分布式缓存开源工具,但一直没有真正接触过,如今接触的产品中实用到过分布式缓存.所以决定一探到底.memcached是一个优秀的开源的分布式缓存工具.也是眼下比較火热的分布 ...
- .NET领域驱动设计—初尝(一:疑问、模式、原则、工具、过程、框架、实践)
.NET领域驱动设计—初尝(一:疑问.模式.原则.工具.过程.框架.实践) 2013-04-07 17:35:27 标签:.NET DDD 驱动设计 原创作品,允许转载,转载时请务必以超链接形式标明 ...
- Github原生CI/CD,初尝Github Actions
Github 原生 CI/CD,初尝 Github Actions Intro Github 目前已经推出了自己的 CICD 服务 -- Github Actions,而且比微软的 Azure Dev ...
- golang快速入门(五)初尝web服务
提示:本系列文章适合对Go有持续冲动的读者 初探golang web服务 golang web开发是其一项重要且有竞争力的应用,本小结来看看再golang中怎么创建一个简单的web服务. 在不适用we ...
随机推荐
- web开发小节.txt
我最近一直在看这个的java web项目涉及到的知识,今天突然感觉思路烁然开明. 我们经常会将java web开发说成是MVCV: view 我在这里姑且就介绍JSP吧.JSP其实就是在原来的静态页面 ...
- I Hate It HDOJ---1754
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 最近买了个Mac Pro,用起来感觉是去年买了个表
最近买了个 Mac Pro ,用了两个星期,强烈建议大家不要买 Mac Pro (128G)搞开发,反而建议用同样的价格,我买的是最便宜8千的,去买个带固态硬盘的联想X系列绝对比Pro好. 一.操作方 ...
- Poj 2528-Mayor's posters 线段切割
题目:http://poj.org/problem?id=2528 Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total ...
- 51单片机产生1Hz-5kHz可调占空比方波
学校的课程设计,总结一下. 注意 1.高低电平的改变不适合在主函数的while循环中,因为要有数码管动态显示的延时和其它逻辑处理,时间太长会不能及时改变高低电平值. 2.中断的执行时间一定是不能超过定 ...
- weekend110(Hadoop)的 第四天笔记
(2015年1月18日) 课程目录 01-复习 02-hadoop中的序列化机制 03-流量求和mr程序开发 04-hadoop的自定义排序实现 05-mr程序中自定义分组的实现 06-shuffle ...
- Shell简介:什么是Shell,Shell命令的两种执行方式
Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...
- 在线App开发平台——应用之星傻瓜式开发平台
随着智能手机及APP应用程序的普及,越来越多的企业和个人意识到APP的营销价值,出于对技术的敬畏,很多企业下意识认为开发APP是一个有难度的技术活,所以很多时候有心无力,也担心APP的后续的技术支持. ...
- Nginx具体的压缩配置
以下是自学it网--中级班上课笔记 网址:www.zixue.it 常用以下配置 gzip on|off gzip_buffers 4K|8K 缓冲(和硬盘块相当) gzip_comp_level [ ...
- 中文字符串的编码转换(c实现)
中文字符串在c/c++中表示为字节序列,在分词的时候需要根据不同的编码方式进行分词,一般分词器需要转换成统一的编码方式再进行转换,有些分词器如ICTCLAS在分词的时候可以不显示定义编码方式,可以检测 ...