jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定
在微信项目中,涉及到一个多选功能。数据来自后台数据库,需要动态加载。
项目结构:微信api+web app。使用jquery mobile框架和jquery mobile ui.
ui我使用的是扁平化样式,大家可以这里查看。[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍]
本来想做这个效果的,可惜没有时间研究出来。
先将就用了这个效果:
思路:
Ajax(使用的是Webmethod)获取数据库的数据,组成集合返回给js
jquery遍历数据,动态绑定到ui。多选控件首选:checkboxs
每个checkbox动态绑定点击事件,点击后保存到js数组中。
最后统一Ajax提交js数组中的数据到服务端
1)、数据获取:本来想采用的是ajaxpro.dll,虽然比较老,但是挺好用,尤其可以返回c#实体,这点很好。但是和其他dll有点冲突,
就换到webmethod了。
[System.Web.Services.WebMethod]
public static string GetSqList(int cityid)
{
StringBuilder sb = new StringBuilder();
Kaitone.UI.BLL.Mobile.Mobile bllm = new Kaitone.UI.BLL.Mobile.Mobile();
Kaitone.UI.BLL.Client.Client bllclient = new Kaitone.UI.BLL.Client.Client();
List<Kaitone.Model.Client.ClientData> list = bllm.GetClientDataByCityId(cityid);
string data= Newtonsoft.Json.JsonConvert.SerializeObject(list); return data;
}
这里使用了Newtonsoft.Json json序列化工具。参考这里:
[jquery+asp.net 调用百度geocoder手机浏览器定位--Api介绍及Html定位方法]
2)、html5代码:
<fieldset data-role="controlgroup" data-theme="f" id="fdsqList">
</fieldset>
3)、js获取数据:
function GetSQ() {
try {
if (ud == "undefined" || ud == null) {
ud = "abc";
}
PageMethods.GetSqList(cityid, CallBack); //默认获取数据
}
catch (E){
}
}
//选择城市
回调函数进行绑定:
function CallBack(res) {
if (res != null) {
var html = ""; var data = eval(res);
$.each(data, function (key, val) {
var _inexistence = $.inArray(val.Id, consqlist)
if (_inexistence >= 0) {
html = html + " <input checked=\"true\" type=\"checkbox\" name=\"" + val.Name + "\" id=\"" + val.Id + "\" class=\"custom\" />";
html = html + " <h3><label for=\"" + val.Id + "\">" + val.Name + val.Address + "</label></h3>";
}
else {
html = html + " <input type=\"checkbox\" name=\"" + val.Name + "\" id=\"" + val.Id + "\" class=\"custom\" />";
html = html + " <label for=\"" + val.Id + "\"><h3>" + val.Name + val.Address + "</h3></label>";
}
});
$('#fdsqList').html(html);
$("#fdsqList").trigger("create");
$.each(data, function (key, val) {
$('#' + val.Id).bind('click', function (e, u) {
ConfigSq(e.target.id * 1, e.target.Name);
});
});
}
注意:
列表创建好了之后,使用html添加checkboxlist,然后调用 $("#fdsqList").trigger("create"); 进行刷新。不然没有样式。
<label for="checkbox-1"> I agree </label>:for需要设置checkbox的对应ID
绑定点击事件:
1
|
|
1
|
ConfigSq是我进行存放数据的数组。e.target是点击事件的控件,就是我要判断的checkbox。 |
$.each(data, function (key, val) {
$('#' + val.Id).bind('click', function (e, u) {
ConfigSq(e.target.id * 1, e.target.Name);
});
这样数据展示就完成了。剩下的就是提交数据到服务端了。
我是直接传递数据给C#即可。微软做的东西就是简单。
其他补充知识:
如果动态增加一个checkbox,用这个方式:
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');//刷新
2.checkbox事件:
1、disable(禁用)
示例:
//禁用
$("#disable_checkbox").bind('click',function(){
$("#major_eng").checkboxradio("disable");
});
2、enable(启用)
示例:
//启用
$("#enable_checkbox").bind('click',function(){
$("#major_eng").checkboxradio("enable");
});
3、checked(选中)
示例:
//选中
$("#checked_checkbox").bind('click',function(){
$("#major_eng").attr("checked",true).checkboxradio("refresh");
});
4、unchecked(不选中)
示例:
//不选中
$("#unchecked_checkbox").bind('click',function(){
$("#major_eng").attr("checked",false).checkboxradio("refresh");
});
jquery mobile Checkbox动态添加刷新及事件绑定的更多相关文章
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 动态添加的html元素绑定事件的方法
避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...
- jQuery如何获取动态添加的元素
1. 使用 on()方法 本质上使用了事件委派,将事件委派在父元素身上 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
- jQuery Mobile的学习时间bottonbutton的事件学习
程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...
随机推荐
- linux_sed 正则替换
目标 替换 test.data文件中的 原正则: (\d{4}[^)]*?) sed不支持 \d 改为0-9 测试 :head test.data| sed -r "s/([0-9]{4}[ ...
- 前端学习笔记(zepto或jquery)—— 布局技巧(一)
html5中有一些标签我们很难改变其样式,例如input=file,select等.这个时候我们需要改变一下思路,将原有透明度置为0,借助于div或span等以控制样式的标签来代替. 效果图: < ...
- 从头开始学JavaScript(一)——基础中的基础
概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) ...
- CSharp设计模式读书笔记(14):职责链模式(学习难度:★★★☆☆,使用频率:★★☆☆☆)
职责链模式(Chain of Responsibility Pattern):避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象 ...
- vS2010 列表控件 加入右键菜单
1.首先,就需要信息加入权限控制,例如,下面的对话框弹出 2,例如以下图选择须要的消息响应,这里选择NM_RCLICK 消息. 3,加入例如以下代码 </pre><pre name= ...
- Net平台下的消息队列介绍
Net平台下的消息队列介绍 本系列主要记录最近学习消息队列的一些心得体会,打算形成一个系列文档.开篇主要介绍一下.Net平台下一些主流的消息队列框架. RabbitMQ:http:// ...
- maven和libgdx
这一篇是关于maven和libgdx的.本来我准备用gradle(现已有gradle模板了),不过暂时有点小问题,而同时libgdx官方提供了maven支持,为了快速上手还是选用maven了. 博客已 ...
- hdu1047 Integer Inquiry 多次大数相加
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1047 Problem ...
- 枚举 UIButton补充
一.URL 1.什么是URL? URL是某个资源的唯一路径,通过这个路径就能访问对应的资源 2.URL的组成 协议头://全路径 * 协议头就代表资源的类型,比如http代表网络服务器资源,ftp代表 ...
- Linux httpd 跳转简单方法二
使用mod_proxy 这种方法要添加上mod_proxy_http.so 在httpd.conf 中打开httpd-vhost 在 httpd-vhost 里面添加上 <VirtualHost ...