多层级下拉式表格
首先下载treetable 插件下使用
页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
<%--自定义样式放在最后--%>
<link href="/Web/css/NurQua.css" rel="stylesheet" />
<link href="/Web/css/Dg.css" rel="stylesheet" />
<style>
.num-addstyle {
border:1px solid #dedede !important;
width:100%;
}
#myModal6 .fixed-table-body{
height:483px;
}
</style>
</head>
<body>
<div class="container-fluid full-height-layout pc-height">
<script>LoadtemplateHtml("TopNav,MenuList")</script>
<main class="row full-height-wrap pc-height-wrap">
<div class="page-title page-title-line">
<div class="title-left"><h4><b>111</b></h4></div>
<div class="title-right">
<i class="btn btn-primary btn-sm" data-bind="click: $root.GoToDefault">首页</i>
<i class="btn btn-success btn-sm" data-bind="click:$root.RefreshPage">刷新</i>
</div>
</div>
<div class="page-title page-title-line">
<div class="title-right">
<i class="btn btn-success btn-sm" data-bind="click:$root.add">新增</i>
<i class="btn btn-success btn-sm" data-bind="click:$root.edit">修改</i>
<i class="btn btn-danger btn-sm" data-bind="click:$root.delete">删除</i>
</div>
</div>
<div class="table-main" style="overflow-x: scroll; max-height:89%; ">
<!--表头-->
<div class="full-height-main div-table-title ">
<table class="table table-striped table-bordered table-hover dataTables-example table-title" style="">
<thead>
<tr>
<th class="col-md-1" >
<div class="th-inner ">
序号
</div>
</th>
<th class="col-md-1" data-field="state" tabindex="0">
<div class="checkbox i-checksall">
<label>
</label>
</div>
</th>
<th class="col-md-5">
<div class="th-inner ">
标题
</div>
</th>
<th class="col-md-6 ">
<div class="th-inner ">
字段名称
</div>
</th>
</tr>
</thead>
</table>
</div>
<!--表主体-->
<div class="full-height-main zj-dangan ">
<table id="table" data-toggle="table" data-click-to-select="true" class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th class="col-md-1" >
<div class="th-inner ">
序号
</div>
</th>
<th class="col-md-1" data-field="state" tabindex="0">
<div class="checkbox i-checksall">
<label>
</label>
</div>
</th>
<th class="col-md-5">
<div class="th-inner ">
标题
</div>
</th>
<th class="col-md-6 ">
<div class="th-inner ">
字段名称
</div>
</th>
</tr>
</thead>
<tbody data-bind="foreach: $root.showlist">
<tr data-index="0" class="selectone">
<td class="" data-bind="html:id" ></td>
<td class="bs-checkbox ">
<div class="checkbox i-checks">
<label>
<input type="checkbox" class="chk_table" value="" data-bind="attr: { id: data.ID }">
<i></i>
</label>
</div>
</td>
<td class=" " data-bind="html:data.ITEM_CODE"></td>
<td class=" " data-bind="html: data.ITEM_VALUE"></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<div class="modal inmodal fade in" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-md">
<div class="modal-content " style="padding: 0; height:760px;">
<h5 style="height: 51px; line-height: 51px; background: #42b1e8; color: #fff; text-align: center; font-family: 'Microsoft YaHei'; font-weight: normal; font-size: 16px;">新增字典信息111</h5>
<div class="modal-body" style="padding: 0">
<div class="">
<div id="wizard" class="wizard-tc hl-zj-new">
<div class="items">
<div class="page">
<div class="gudinheight" style="/*height: 180px;*/ height:605px;">
<p class="fenleimuban-td">
<span id="noramaledit1" class="fenleimuban active-td" data-bind="click: $root.Setinfo">
<font class="left" style="">字典标题</font>
</span>
<span id="noramaledit2" class="fenleimuban " data-bind="click: $root.Setinfo">
<font class="left" style="">标题子项</font>
</span>
<span id="noramaledit3" class="fenleimuban " data-bind="click: $root.Setinfo">
<font class="left" style="">项目选项</font>
</span>
</p>
<div data-bind="visible: $root.shownext()=='show1'">
<p>
<label>标题：</label>
<input id="title" type="text" value="" class="hl-input" placeholder="基础信息" />
</p>
<p>
<label>排序：</label>
<input id="titleorder" type="text" value="" class="hl-input" placeholder="1" />
</p>
</div>
<div data-bind="visible: $root.shownext()=='show2'">
<p>
<label>标题：</label>
<select style="border-right: 1px solid #e7e7e7;height:29px;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;border-left: none; border-radius: 0;padding-left: 5px;width: 303px !important;box-shadow: none;float: left;" data-bind="options: $root.titlelist, value: $root.TitleInfo, optionsValue: 'ID', optionsText: 'ITEM_VALUE'">
</select>
</p>
<p>
<table id="table1" data-toggle="table" data-click-to-select="true" class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th class="col-md-3">
<div class="th-inner ">
子项名称
</div>
</th>
<th class="col-md-4 ">
<div class="th-inner ">
子项类型
</div>
</th>
<th class="col-md-4 ">
<div class="th-inner ">
排序
</div>
</th>
</tr>
</thead>
<tbody data-bind="foreach:$root.detaillist2">
<tr data-index="0" class="">
<td class=" ">
<div class="gw_num">
<input data-bind="value: ITEM_VALUE" type="text" value="a" class=" num-addstyle" />
</div>
</td>
<td class=" ">
<div class="gw_num">
<input data-bind="value: ITEM_TYPE" type="text" value="b" class=" num-addstyle" />
</div>
</td>
<td class=" ">
<div class="gw_num" style="width:auto;">
<input data-bind="value: ITEM_ORDER" style="width:100px;float:left;margin:0 17px;" type="text" value="1" class=" num-addstyle" />
<em class="add" style="float:left" data-bind="click: $root.AddClick2">
<img src="/Web/img/btnjia.png" /></em>
<em class="jian" style="float:left" data-bind="click: $root.DelClick2">
<img src="/Web/img/btnjian.png" /></em>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
<div data-bind="visible: $root.shownext()=='show3'">
<p>
<label>标题：</label>
<select style="border-right: 1px solid #e7e7e7;height:29px;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;border-left: none; border-radius: 0;padding-left: 5px;width: 303px !important;box-shadow: none;float: left;" data-bind="options: $root.titlelist, value: $root.TitleInfo, optionsValue: 'ID', optionsText: 'ITEM_VALUE'">
</select>
</p>
<p>
<label>子项：</label>
<select style="border-right: 1px solid #e7e7e7;height:29px;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;border-left: none; border-radius: 0;padding-left: 5px;width: 303px !important;box-shadow: none;float: left;" data-bind="options: $root.contentlist, value: $root.ContentInfo, optionsValue: 'ID', optionsText: 'ITEM_VALUE'">
</select>
</p>
<p>
<table id="table2" data-toggle="table" data-click-to-select="true"
class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th class="col-md-3">
<div class="th-inner ">
选项名称
</div>
</th>
<th class="col-md-4 ">
<div class="th-inner ">
选项编码
</div>
</th>
<th class="col-md-4 ">
<div class="th-inner ">
排序
</div>
</th>
</tr>
</thead>
<tbody data-bind="foreach:$root.detaillist">
<tr data-index="0" class="">
<td class=" ">
<div class="gw_num">
<input data-bind="value: ITEM_VALUE" type="text" value="a" class=" num-addstyle" />
</div>
</td>
<td class=" ">
<div class="gw_num">
<input data-bind="value: ITEM_CODE" type="text" value="b" class=" num-addstyle" />
</div>
</td>
<td class=" ">
<div class="gw_num" style="width:auto;">
<input data-bind="value: ITEM_ORDER" style="width:100px;float:left;margin:0 17px;" type="text" value="1" class=" num-addstyle" />
<em class="add" style="float:left" data-bind="click: $root.AddClick">
<img src="/Web/img/btnjia.png" /></em>
<em class="jian" style="float:left" data-bind="click: $root.DelClick">
<img src="/Web/img/btnjian.png" /></em>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
<div class="btn_nav">
<input type="button" data-dismiss="modal" class="next-right right" style="margin-right: 5px;" value="取消" />
<input type="button" data-bind="click: $root.Save" class="next-right right" style="margin-right: 5px;" value="完成" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal inmodal fade in" id="edit" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="padding: 15px 7px; font-size: 18px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">编辑字典信息222</h4>
</div>
<div class="modal-body" style="padding: 5px;">
<div class="panel-body" style="padding: 0px;">
<table class="table" style="margin-bottom: 2px; height: 18%;">
<tbody style="border: none !important">
<tr>
<td style="width: 150px; text-align: right">
<p>标题：</p>
</td>
<td>
<input type="text" class="form-control" style="width: 100%" id="edittitle" data-bind="value: $root.edittitle()">
</td>
</tr>
<tr>
<td style="width: 150px; text-align: right">
<p>子项：</p>
</td>
<td>
<input type="text" class="form-control" style="width: 100%" id="editcontent" data-bind="value: $root.editcontent()">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class=" btn-gray" data-dismiss="modal" style="background: #42b1e8; border: #42b1e8 1px solid; color: #fff"><span aria-hidden="true">取消</span></button>
<button type="button" class=" btn-gray" style="background: #42b1e8; border: #42b1e8 1px solid; color: #fff" data-bind="click: $root.EditUserManageDictInfo">保存</button>
</div>
</div>
<small class="font-bold"></small>
</div>
<small class="font-bold"></small>
</div>
</body>
</html>
