java 下拉框使用json_[Java教程]Jquery+json绑定带层次下拉框（select控件）

[Java教程]Jquery+json绑定带层次下拉框(select控件)

0 2014-08-20 19:01:07

一、实现的效果图

备注：

1、主要实现添加类别绑定到Ztree树之后，select下拉框在不刷新页面的情况下，通过Jquery重新绑定问题，增加用户体验度；

2、这个只是实现两层的绑定，通过sql语句排列成树状结构，然后绑定到select控件上；select * from NewsCategory order by case when ParentId=0 then Id*10000 else ParentId*10000+Id end

二、主要代码

html代码不选父级类

Jquery代码//加载选择栏 var html = ['不选父级模块']; var data = eval(json.msg);//转换为json对象 var levelStr;//记录层级值 for (var key in data) { var str = data[key].itemvalue; var _p = str.split("|")[2]; var _c = data[key].pId; //判断是否是二级分类 if (_p == _c) { //判断是否是一级分类 if (_p != "") { levelStr = "┗━┻━"; } else { levelStr = "┗━"; } html.push('' + levelStr + data[key].name + ''); } $("select[name='pid']").empty().append(html.join(''));

json格式字符串"[{"id":31,"name":"\u65b0\u95fb\u4e2d\u5fc3","pid":0,"itemvalue":"|0|"},{"id":51,"name":"\u4f01\u4e1a\u5feb\u8baf","pid":31,"itemvalue":"|0|31|"},{"id":52,"name":"\u4f01\u4e1a\u516c\u544a","pid":31,"itemvalue":"|0|31|"},{"id":53,"name":"\u884c\u4e1a\u52a8\u6001","pid":31,"itemvalue":"|0|31|"},

{"id":54,"name":"\u5173\u4e8e\u76df\u53cb\u634c\u634c","pid":0,"itemvalue":"|0|"},{"id":55,"name":"\u4f01\u4e1a\u6982\u51b5","pid":54,"itemvalue":"|0|54|"},{"id":56,"name":"\u4f01\u4e1a\u6587\u5316","pid":54,"itemvalue":"|0|54|"},{"id":57,"name":"\u4f01\u4e1a\u53d1\u5c55","pid":54,"itemvalue":"|0|54|"},{"id":58,"name":"\u8054\u7cfb\u6211\u4eec","pid":54,"itemvalue":"|0|54|"},{"id":65,"name":"\u4ea7\u54c1\u670d\u52a1","pid":0,"itemvalue":"|0|"},{"id":70,"name":"\u63a8\u8350\u670d\u52a1","pid":65,"itemvalue":"|0|65|"},{"id":71,"name":"\u8ba1\u8d39\u65b9\u5f0f","pid":65,"itemvalue":"|0|65|"},{"id":72,"name":"\u7528\u6237\u987b\u77e5","pid":65,"itemvalue":"|0|65|"},{"id":73,"name":"\u7981\u5bc4\u8303\u56f4","pid":65,"itemvalue":"|0|65|"},{"id":75,"name":"\u666e\u901a\u5feb\u9012","pid":70,"itemvalue":"|0|65|70|"},{"id":76,"name":"\u7279\u79cd\u5feb\u4ef6","pid":70,"itemvalue":"|0|65|70|"}......]"

涉及的知识点：

1、记录层级值ItemValue的添加(即类别添加)if (model.ParentId == 0) { model.ItemValue = "|0|"; } else { Express.Model.NewsCategory modelid = Express.BLL.NewsCategory.GetModel(model.ParentId); model.ItemValue = modelid.ItemValue + model.ParentId + "|"; }

2、获取的json字符串(json.msg)if (Express.BLL.NewsCategory.Insert(model) > 0) { return json.Serialize(new { code = 1, msg = GetJson() }); }

//序列化，将对象转化为JSON字符串 protected string GetJson() { //为启用 AFAX 的应用程序提供序列化和反序列化功能 System.Web.Script.Serialization.JavaScriptSerializer json = new System.Web.Script.Serialization.JavaScriptSerializer(); List list = new List(); //获取管理员模块列表 list = Express.BLL.NewsCategory.Get(); //将对象转换为JSON字符串 return json.Serialize(list); }

本文网址：http://www.shaoqun.com/a/98824.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0