BootStrap实现树形目录组件代码详解
网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了BootStrap实现树形目录组件代码详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
需求描述
产品添加页面,需要选择车型。在bootStrap的modal上弹出子modal来使用。
车型一共有4级目录。要使用目录树。
然后分活动和商品两种,需要能够通过不通参数来调用该组件。
车型品牌要使用字母导航。
技术实现
数据都是后端传json过来,我们ajax获取然后操作。
由于车型总数据有几万条以上,不可能一次性请求过来。这里我们使用异步的方式,每点击一次目录节点,加载它的下一级。
这里我们用两个参数来控制活动和商品的不同加载。_showPrice和opened
后端传过来的第一级数据是车型品牌,其中有首字母的字段。字母导航的初始化,就是把这个数据用firstWord属性来排序,然后忽略掉其他首字母相同的元素。
对于活动类型,需要返回所勾选的最低一级的数据。(勾选奥迪和奥迪A6,则只返回A6的意思),这里用了整整4层循环。不过它是根据是否有checked来遍历的,速度不慢。
/** * Created by nuenfeng on 2016/5/23. * 车型选择组件 * 参数: * showPrice 是否要输入价格(不输入价格的从品牌开始就有选项框,没有全选功能) * params 外部传入的对象 * callback 回调函数 */ (function () { var uriCarBrand = global.url.carBrandList; //var uri = uriCarBrand.url; var opened = false; //当前页面是否打开过本组件 var _callback; //回调函数 var requestParams; //请求时要使用的参数 var _showPrice; //是否要输入价格 var lastShowPrice; //前一次打开状态 var charNavArr; //字母导航数组 function CarTree(showPrice, params, callback) { // 没打开过,初始化; 打开过,直接显示modal requestParams = params; _showPrice = showPrice; _callback = callback; if (!opened || lastShowPrice != showPrice) { this.init(); opened = true; lastShowPrice = showPrice; } else { $('#zc-sub-modal').modal('show'); } } CarTree.prototype.init = function () { msjcTools.addSubModal(); //设置大模态框 $('#zc-sub-modal').addClass("bs-example-modal-lg"); $('#zc-sub-modal .modal-dialog').addClass("modal-lg"); var str = '<form id="info-form" data-parsley-validate class="form-horizontal form-label-left">'; str += '<ul id="resourceId" class="treeview-gray">' str += '<li id="cb_"><span>汽车品牌选择</span>'; str += "</li>" str += '</ul>' str += '</form>'; var objId = 'cb_0'; var carBrandId = 0; loadSubMenu(objId, carBrandId, 1); //1 表示第一次加载,用于加载成功后判断时候要初始化字母导航 $('#zc-sub-modal-body').html(str); $('#zc-sub-modal').modal({ keyboard: false, show: true }); // 点击保存事件 $('#zc-sub-modal .modal-footer .btn.btn-primary').unbind().bind("click", function () { save(); }); //$("#resourceId").find("input[type=checkbox]").unbind().bind("click",function(){ // if($(this).is(':checked')==true){//选中 则其上层节点全部展开并选中 // //上级选中 // $(this).parents("li").each(function(){ // $(this).find("input[type=checkbox]:first").attr("checked",true) // }); // } else { // //下级取消选中 // $(this).siblings("ul").find("input[type=checkbox]").each(function(){ // $(this).removeAttr("checked"); // }); // } /
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程