现在位置首页 / 项目实战 /正文

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

作者: IT小兵 | 2013年9月9日| 热度:℃ | 评论: |参与:

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

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

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

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

jquery listview checkbox 效果

先将就用了这个效果:

jquery listview checkbox 效果

思路:

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

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

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

  4. 最后统一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


绑定点击事件:

 $.each(data, function (key, val) {
                $('#' + val.Id).bind('click', function (e, u) {         
            ConfigSq(e.target.id * 1, e.target.Name);
            });
ConfigSq是我进行存放数据的数组。e.target是点击事件的控件,就是我要判断的checkbox。


这样数据展示就完成了。剩下的就是提交数据到服务端了。

我是直接传递数据给C#即可。微软做的东西就是简单。

其他补充知识:

  1. 如果动态增加一个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");
	});


转发注明来自:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询