jquery字典表设计和无限级联

数据库设计

CREATE TABLE `s_dict` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `parent_id` int(11) DEFAULT NULL COMMENT ' 父ID ',
  `data_type` varchar(50) DEFAULT NULL COMMENT ' 数据类别',
  `data_code` varchar(50) DEFAULT NULL COMMENT ' 数据编码 ',
  `parent_data_code` varchar(50) DEFAULT NULL COMMENT ' 父类数据编码 ',
  `data_value` varchar(200) DEFAULT NULL COMMENT ' 数据名称/值 ',
  `sort_no` int(11) unsigned DEFAULT '1' COMMENT ' 顺序 ',
  `state` varchar(10) DEFAULT NULL COMMENT '状态（00A有效；00X失效）',
  `data_desc` varchar(1500) DEFAULT NULL COMMENT '数据描述',
  `comments` varchar(255) DEFAULT NULL COMMENT '备注',
  `crt_time` datetime DEFAULT NULL COMMENT '创建时间',
  `crt_user_id` int(11) DEFAULT NULL COMMENT '创建工号',
  `upd_time` datetime DEFAULT NULL COMMENT '修改时间',
  `upd_user_id` int(11) DEFAULT NULL COMMENT '修改工号',
  PRIMARY KEY (`id`),
  UNIQUE KEY `SYS_DICT_PK` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10453 DEFAULT CHARSET=utf8 COMMENT='系统字典表';

SET FOREIGN_KEY_CHECKS = 1;

　　

JS前端代码

        //初始化字典第一级
        this.getSDicListTemp("10000");


        //递归构建无限下拉级联
        getSDicListTemp: function(parentId){
            if(parentId){
                var that = this;
                // 移除当前元素后面的所有元素
                this.$(this).nextAll().remove();
                ListMgrAction.getSDictList({pageNo: 1,pageSize: 99,parentId:parentId,dataType:'INDUSTRY'}, function (res) {
                    var jsonRes = res.data;
                    if(res.data.length!=0){
                        var selectHtml = "<select name='cascadingDict' class='js-cascading-dict"+parentId+"' style='width:100px;height:26px;padding:3px 6px;font-size:13px;line-height:1.42857143;color:#333;background-color:#fff;border:1px solid#e3e3e3;border-radius:3px;'>";
                        selectHtml+="<option value=''>请选择</option>";
                        for (var index in jsonRes){
                            selectHtml += "<option value='"+jsonRes[index].id+"' dataCode='"+(jsonRes[index].dataCode?jsonRes[index].dataCode:'')+"'>"+jsonRes[index].dataValue+"</option>";
                        }
                        selectHtml += "</select>  ";
                        this.$(".js-ent-industry").append(selectHtml);
                        $(".js-cascading-dict"+parentId).bind('change',function(){
                            // 移除当前元素后面的所有元素
                            that.$(this).nextAll().remove();
                            //递归调用
                            that.getSDicListTemp($(this).val());
                            if(that.$(".js-cascading-dict"+parentId).find("option:selected").attr("dataCode")){
                                //赋值code
                                that.$(".js-ent-industry-data-code").val(that.$(".js-cascading-dict"+parentId).find("option:selected").attr("dataCode"));
                            }
                        })
                    }
                });
            }
        },
    

　　

html

<div class="col-md-9">
                                    <label class="col-md-1 control-label">
                                        行业类别<input type="hidden" class="js-ent-industry-data-code" name="dataCode">
                                    </label>
                                    <div class="col-md-11 js-ent-industry">

                                    </div>
</div>