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>