首先让我们看看要实现的效果
一般来说有两种情况。
1、第一种直接在一个数据表中建立父子级别关系,读出来遍历即可。(也就是上述置灰部分可选并没有其他东西)
2、在数据表中建立父子级别关系。读取最低子类的数据。根据最低子类数据查找其他数据信息,并显示
首先在页面上定义一个div。用于展示我们需要展示的数据
<div align="center" class="layui-col-md3 layui-col-xs12">
<div class="layui-form-item">
<div class="layui-input-inline layui-show-xs-block" style="width: 315px">
<div id="pid" class="xm-select-demo" ></div>
</div>
</div>
</div>
<div align="center" class="layui-col-md3 layui-col-xs12">
<div class="layui-form-item">
<input name="send_money" style="float: right;background:#CCCCCC" placeholder="该物品统一单价" class="layui-input" autocomplete="off" disabled >
</div>
</div>
然后在当前界面写一个ajax用于请求数据,返回值进行数据处理
<script type="text/javascript">
layui.use(['form', 'layer','laydate'],
function() {
$ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
//展示所有物料
$.ajax({
type:'post',
url:'/back/Name',//此处填写需要请求的数据接口。可进行初始传值,父类id为0的作为最高级
data:{
pid : 0
},
success:function(data){
console.log(data)
var pid = xmSelect.render({
el: '#pid',//需要遍历的div id
model: {
label: