jquery mobile Checkbox动态添加刷新及事件绑定

时间:2022-06-28 20:11:37

jquery mobile Checkbox动态添加刷新及事件绑定

在微信项目中,涉及到一个多选功能。数据来自后台数据库,需要动态加载。

项目结构:微信api+web app。使用jquery mobile框架和jquery mobile ui.

ui我使用的是扁平化样式,大家可以这里查看。[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍]

本来想做这个效果的,可惜没有时间研究出来。

jquery mobile Checkbox动态添加刷新及事件绑定

先将就用了这个效果:

jquery mobile Checkbox动态添加刷新及事件绑定

思路:

  1. Ajax(使用的是Webmethod)获取数据库的数据,组成集合返回给js

  2. jquery遍历数据,动态绑定到ui。多选控件首选:checkboxs

  3. 每个checkbox动态绑定点击事件,点击后保存到js数组中。

  4. 最后统一Ajax提交js数组中的数据到服务端

1)、数据获取:本来想采用的是ajaxpro.dll,虽然比较老,但是挺好用,尤其可以返回c#实体,这点很好。但是和其他dll有点冲突,

就换到webmethod了。

jquery mobile Checkbox动态添加刷新及事件绑定
 [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;
}
jquery mobile Checkbox动态添加刷新及事件绑定

这里使用了Newtonsoft.Json json序列化工具。参考这里:

[jquery+asp.net 调用百度geocoder手机浏览器定位--Api介绍及Html定位方法]

2)、html5代码:

   <fieldset data-role="controlgroup" data-theme="f" id="fdsqList">
</fieldset>

3)、js获取数据:

jquery mobile Checkbox动态添加刷新及事件绑定
function GetSQ() {
try {
if (ud == "undefined" || ud == null) {
ud = "abc";
}
PageMethods.GetSqList(cityid, CallBack); //默认获取数据
}
catch (E){
}
}
//选择城市
jquery mobile Checkbox动态添加刷新及事件绑定

回调函数进行绑定:

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动态添加刷新及事件绑定的更多相关文章

  1. &lbrack;转&rsqb;jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  2. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  3. 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. 动态添加的html元素绑定事件的方法

    避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...

  5. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. 关于动态添加的html元素绑定的事件不生效的解决办法

    1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...

  8. 【Jquery mobile】动态加载ListView 转

    [Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...

  9. jQuery Mobile的学习时间bottonbutton的事件学习

    程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...

随机推荐

  1. phpstorm常用快捷键

    mac电脑phpstorm快捷键    command + a 全选    command + c 复制    command + v 粘贴    command + z 撤消    fn+comma ...

  2. oracle 导出指定的存储过程

    只能导出以下类型: PROCEDURE PACKAGE PACKAGE BODY TYPE BODY FUNCTION TYPE 也就是,表需要单独导出并导入(已经能俭省很多手动操作了). SET e ...

  3. 网络基础 &colon; OSI参考模型

    Overview OSI规范的作用之一就是帮助在不同的主机之间传输数据. OSI模型包含7层,它们分为两组. 上面3层指定了终端中的应用程序如何彼此通信以及如何与用户交流: 下面4层指定了如何进行端到 ...

  4. 【Swift 2&period;0】实现简单弹幕功能

    前言 简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over ...

  5. window 下Qt for android 环境搭建

    ******************************************************************* 转自http://www.cnblogs.com/rophie/ ...

  6. Package &&num;39&semi;chkconfig&&num;39&semi; has no installation candidate

    Chkcofig不再适用于Ubuntu系统,可用类似的软件sysv-rc-conf进行替换: Chkconfig is no longer available in Ubuntu. Chkconfig ...

  7. js中将 整数转成字符,,将unicode 编码后的字符还原出来的方法。

    一.将整数转成字符: String.fromCharCode(17496>>8,17496&0xFF,19504>>8,19504&0xFF,12848> ...

  8. 【ANT】java项目生成文件示例

    <?xml version="1.0" ?> <project default="dist"> <property name=&q ...

  9. java8中stream的map和flatmap的理解

    转自https://blog.csdn.net/wynjauu/article/details/78741093 假如我们有这样一个需求给定单词列表["Hello","W ...

  10. aurora 64B&sol;66B ip核设置与例程代码详解

    见网页https://blog.csdn.net/u014586651/article/details/84349328 https://blog.csdn.net/u012135070/articl ...