master

分支 (1)

管理

管理

master

layui-admx
/
datatable.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <title>layui在线调试</title>
  <link rel="stylesheet" href="static/layui-v2.5.6/layui/css/layui.css" media="all">
  <style></style>
</head>
<body class="layui-layout-body">
 <div>
	 <form class="layui-form" method="post">
		<div id="cat_ids2">
	</form>
 </div>
 <table class="layui-hide" id="demo" lay-filter="test"></table>

 <script type="text/html" id="barDemo">
   <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
<script src="static/layui-v2.5.6/layui/layui.js"></script>
<script >
</script>
<script>
layui.config({
  version: '1605865235662' //为了更新 js 缓存，可忽略
});

layui.extend({
    selectN: './static/layui-v2.5.6/layui/lay/extends/select/selectN',
    selectM: './static/layui-v2.5.6/layui/lay/extends/select/selectM',
  }).use(['laydate', 'laypage', 'layer', 'table','jquery','selectN','selectM', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,selectN = layui.selectN //轮播
  ,selectM = layui.selectM //上传
  ,element = layui.element //元素操作

  //
  var catData = [{
	"id": 1,
	"name": "周边旅游",
	"children": [{
		"id": 24,
		"name": "广东",
		"status": 0,
		"children": [{
			"id": 7,
			"name": "广州"
		}, {
			"id": 23,
			"name": "潮州"
		}]
	}]
}, {
	"id": 5,
	"name": "国内旅游",
	"children": [{
		"id": 8,
		"name": "华北地区",
		"children": [{
			"id": 9,
			"name": "北京"
		}]
	}]
}, {
	"id": 6,
	"name": "出境旅游",
	"children": [{
		"id": 10,
		"name": "东南亚",
		"children": [{
			"id": 11,
			"name": "马来西亚",
			"children": [{
				"id": 20,
				"name": "沙巴",
				"children": [{
					"id": 21,
					"name": "美人鱼岛",
					"children": [{
						"id": 22,
						"name": "潜水"
					}]
				}]
			}]
		}]
	}]
}];

 var catIns2 = selectN({
      //元素容器【必填】
      elem: '#cat_ids2'
      //候选数据【必填】
      ,data: catData
      //设置了长度
      ,width:null
      //默认值
      ,selected: [6,10,11]
      //为真只取最后一个值
      ,last:true

		//空值项提示，可设置为数组['请选择省','请选择市','请选择县']
		,tips: '请选择'

		//事件过滤器，lay-filter名 不设置与选择器相同(去#.)
		,filter: ''

		//input的name 不设置与选择器相同(去#.)
		,name: 'cat2'

		//数据分隔符
		,delimiter: ','

		//数据的键名
		,field:{idName:'id',titleName:'name',childName:'children'}

		//表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
		,formFilter: null

    });

  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 420
    ,url: 'https://www.layui.com/demo/table/user/?page=1&limit=10' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150}
      ,{field: 'sign', title: '签名', width: 200}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });


});
</script>
</body>
</html>