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){ 
    }
}
//選擇城市

 

回調函數進行綁定：

 

 

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");
});

 

 

 

 

 

 

 

標簽:  jquerymobile,  checkbox動態添加,  Checkbox事件綁定,  Checkbox event bind