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