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

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

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

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

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

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

先将就用了这个效果：

思路：

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){ 
    }
}
//选择城市

 

回调函数进行绑定：

 

  View Code

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

 

绑定点击事件：

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#即可。微软做的东西就是简单。

其他补充知识：

  View Code

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

 

 

 

 

 

 

 

标签:  jquerymobile,  checkbox动态添加,  Checkbox事件绑定,  Checkbox event bind