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_awk_内部正则过滤
awk -F'\t' '{if($3 !~ /^<p><img/){print $0}}' latex500.db|wc -l
- HDU 4107 线段树
给出N个节点,M次操作,和p 每次操作 对l-r区间的每一个节点+c,若节点值>=p,则加2*c: 结点存当前区间伤害最小值,最大值,以及lazy操作.更新到假设最小值大于等于P,或者最大值小于 ...
- Mysql sql声明召回2 --正则表达式
这里简单回顾mysql在过滤后的数据使用正则表达式时.主要利用每方法将样品,或添加一些简短的说明. 下面说说提前,使用正则表达式是用来过滤数据 REGEXPkeyword 基本字符相匹配: SELEC ...
- SpringMVC1
itRed You are never too old to set another goal or to dream a new dream. SpringMVC一路总结(一) SpringMVC听 ...
- 使用myeclipse创建带注解的model实体类
1.先新建JPA项目: 如果没有就点击左下角的Show All Wizards. 点两次Next后,点击Finish即可,中间不用任何操作 (点第二次Next后会出现连接到所在数据库,先不管) ...
- java 字符串反转
描述:给我一个字符串,例如I love java,输出: java love I 方法一 public class StringReverse { public void swap(char[] ...
- 堆VS栈
c#堆VS栈(Part One) 前言 本文主要是讲解C#语言在内存中堆.栈的使用情况,使读者能更好的理解值类型.引用类型以及线程栈.托管堆. 首先感谢原文作者:Matthew Cochran 为我们 ...
- .NET Framework 各版本区别
.NET Framework 各版本区别 .NET Framework 1.1 自1.0版本以来的改进:自带了对mobile asp .net控件的支持.这在1.0版本是以附加功能方式实现的,现在已经 ...
- 《浪潮之巅》完全系类——IT人士必读经典
浪潮之巅 第一章 帝国的余辉(AT&T) 浪潮之巅第二章 — 蓝色巨人(IBM) 浪潮之巅第三章 — “水果”公司的复兴 (乔布斯和苹果公司) 浪潮之巅第四章 — 计算机工业的生态链 浪潮之巅 ...
- 关于phpcms中模块_tag.class.php中的pc_tag()方法的含义
关于phpcms中模块_tag.class.php中的pc_tag()方法的含义: 在phpcms系统中自己写后台模块,要在前台模板中显示出来须要在\phpcms\modules\自定义 ...