数据库设计
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>
原文:https://www.cnblogs.com/kkvt/p/12882052.html