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){ } } //选择城市
回调函数进行绑定:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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#即可。微软做的东西就是简单。
其他补充知识:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
如果动态增加一个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");
});