You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
9.2 KiB
289 lines
9.2 KiB
2 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="renderer" content="webkit">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
|
|
<meta name="format-detection" content="telephone=no">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
|
||
|
|
<style>
|
||
|
|
.layui-laypage-skip{
|
||
|
|
display:flex!important;
|
||
|
|
}
|
||
|
|
.layui-table-page {
|
||
|
|
height:24px
|
||
|
|
}
|
||
|
|
.layui-table-view .layui-form-radio > i {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
#checkboxArea{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.layui-input{
|
||
|
|
padding-left:2px
|
||
|
|
}
|
||
|
|
/*layui多选框样式*/
|
||
|
|
.layui-form-checkbox span {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.layui-form-item .layui-form-checkbox[lay-skin="primary"]{
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i,.layui-form-checkbox[lay-skin=primary] i {
|
||
|
|
width:12px;
|
||
|
|
height:12px;
|
||
|
|
line-height: 12px;
|
||
|
|
}
|
||
|
|
.layui-form-checkbox[lay-skin="primary"] {
|
||
|
|
padding-left:20px
|
||
|
|
}
|
||
|
|
.layui-form-checkbox[lay-skin="primary"] span {
|
||
|
|
line-height: 12px;
|
||
|
|
padding-right: 0px;
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
/*select下拉样式*/
|
||
|
|
.layui-form-select dl{
|
||
|
|
top:25px
|
||
|
|
}
|
||
|
|
.smInput .layui-input {
|
||
|
|
width:25px;
|
||
|
|
padding-right:10px
|
||
|
|
}
|
||
|
|
.layui-table-col-special{
|
||
|
|
display:none
|
||
|
|
}
|
||
|
|
.layui-table-page,.layui-table-box,.layui-table-cell{
|
||
|
|
text-align:center
|
||
|
|
}
|
||
|
|
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
||
|
|
padding:0px
|
||
|
|
}
|
||
|
|
.layui-table-cell {
|
||
|
|
height:24px
|
||
|
|
}
|
||
|
|
.layui-table-page {
|
||
|
|
padding:2px 2px 0;
|
||
|
|
}
|
||
|
|
.layui-table-main{
|
||
|
|
height:160px !important;
|
||
|
|
}
|
||
|
|
#page{
|
||
|
|
height:25px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.layui-laypage{
|
||
|
|
margin:2px 0px
|
||
|
|
}
|
||
|
|
.layui-form{background:#fff}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="layui-form">
|
||
|
|
<div class="layui-form-item" style="margin-top: 2px">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label">检索</label>
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<input type="text" id="demoReload" data-type="reload" placeholder="拼音、值" lay-verify="required" autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline">
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="custom" id="custom">自定义</button>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline">
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="changeSelect" id="changeSelect">多选</button>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline">
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="submit" id="submit">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" id="checkboxArea">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<input type="checkbox" id="order" lay-skin="primary" title="序号">
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline smInput">
|
||
|
|
<label class="layui-form-label">间隔</label>
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<select name="interest" id="space">
|
||
|
|
<option value=".">.</option>
|
||
|
|
<option value="、" selected>、</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline smInput">
|
||
|
|
<label class="layui-form-label">选项间隔</label>
|
||
|
|
<div class="layui-input-inline" style="margin:0 0 0 60px">
|
||
|
|
<select name="interest" id="optionSpace">
|
||
|
|
<option value="、">、</option>
|
||
|
|
<option value="；" selected>；</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-inline">
|
||
|
|
<input type="checkbox" lay-skin="primary" title="排斥">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||
|
|
<div id="page"></div>
|
||
|
|
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
||
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var parentNode = parent.document.getElementsByClassName("layui-layer");
|
||
|
|
var parentEle = parentNode[parentNode.length-1];
|
||
|
|
var limit = 10;
|
||
|
|
layui.use(['table','laypage'], function(){
|
||
|
|
var laypage = layui.laypage;
|
||
|
|
//table初始化
|
||
|
|
var pageInit = function (limit) {
|
||
|
|
laypage.render({
|
||
|
|
elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
|
||
|
|
count: 13, //数据总数，从服务端得到
|
||
|
|
limit: limit, // 每页条数
|
||
|
|
layout: ['prev', 'page', 'next'],
|
||
|
|
jump: function (obj, first) {
|
||
|
|
var demoReload = $('#demoReload');
|
||
|
|
if(demoReload.val()){
|
||
|
|
tableInit(limit,obj.curr,demoReload.val())
|
||
|
|
}else{
|
||
|
|
tableInit(limit,obj.curr)
|
||
|
|
}
|
||
|
|
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var tableInit = function(limit,pageNum,searchVal){
|
||
|
|
table.render({
|
||
|
|
elem: '#test'
|
||
|
|
,url:'table.json'
|
||
|
|
,defaultToolbar: false
|
||
|
|
,cols: [[
|
||
|
|
{type:"checkbox",width:20}
|
||
|
|
, {field:'value', title:'值',filter:true, width:85}
|
||
|
|
,{field:'code', title:'编码', width:25}
|
||
|
|
,{field:'id', title:'ID', width:25}
|
||
|
|
,{field:'py', title:'拼音',filter:true, width:45}
|
||
|
|
,{field:'content', title:'扩展', width:100}
|
||
|
|
]],
|
||
|
|
id:'dataTest'
|
||
|
|
,limit:limit
|
||
|
|
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
|
||
|
|
var newData = [];
|
||
|
|
var length = pageNum*limit<res.length?pageNum*limit:res.length;
|
||
|
|
for(var i=(pageNum-1)*limit;i<length;i++){
|
||
|
|
if(searchVal && searchVal.trim()!==''){
|
||
|
|
if(res[i].py ===searchVal || res[i].value ===searchVal ){
|
||
|
|
newData.push(res[i])
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
newData.push(res[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(newData.length>0){
|
||
|
|
return {
|
||
|
|
"code": 0, //解析接口状态
|
||
|
|
"msg": '', //解析提示文本
|
||
|
|
"count": searchVal?newData.length:res.length, //解析数据长度
|
||
|
|
"data": newData //解析数据列表
|
||
|
|
};
|
||
|
|
}else{
|
||
|
|
return {
|
||
|
|
"code": 0, //解析接口状态
|
||
|
|
"msg": '', //解析提示文本
|
||
|
|
"count": 0, //解析数据长度
|
||
|
|
"data":{} //解析数据列表
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
var table = layui.table;
|
||
|
|
var selectType = "radio"
|
||
|
|
var selectData=[]
|
||
|
|
var $=layui.$;
|
||
|
|
pageInit(limit)
|
||
|
|
//监听行单击事件（双击事件为：rowDouble）
|
||
|
|
table.on('row(test)', function(obj){
|
||
|
|
if(selectType === 'checkbox'){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
var data = obj.data;
|
||
|
|
selectData = data
|
||
|
|
//标注选中样式
|
||
|
|
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
|
||
|
|
});
|
||
|
|
// 搜索事件
|
||
|
|
$('#demoReload').on('input', function(){
|
||
|
|
var demoReload = $('#demoReload');
|
||
|
|
pageInit(limit)
|
||
|
|
});
|
||
|
|
//点击自定义按钮
|
||
|
|
document.getElementById("custom").onclick = function(){
|
||
|
|
parent.layer.closeAll();
|
||
|
|
parent.layer.open({
|
||
|
|
title:false,
|
||
|
|
type:2,
|
||
|
|
closeBtn: 0,
|
||
|
|
shade:0,
|
||
|
|
area:['170px','50px'],
|
||
|
|
offset:[parseFloat(parentEle.style.top)+parseFloat(parentEle.style.height),parseFloat(parentEle.style.left)],
|
||
|
|
content:['select/input.html', 'no']
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//点击多选单选按钮
|
||
|
|
document.getElementById("changeSelect").onclick = function(){
|
||
|
|
var obj=document.getElementById("changeSelect")
|
||
|
|
var hideDom = document.getElementsByClassName("layui-table-col-special")
|
||
|
|
if(selectType === 'radio'){
|
||
|
|
selectType = 'checkbox'
|
||
|
|
document.getElementById("changeSelect").innerHTML = "单选"
|
||
|
|
document.getElementById("checkboxArea").style.display = "block"
|
||
|
|
for(var i = 0;i<hideDom.length;i++){
|
||
|
|
hideDom[i].style.display = "block"
|
||
|
|
}
|
||
|
|
var selectEle = table.config.elem.children().context.querySelector('.layui-table-click')
|
||
|
|
if(selectEle !== null){
|
||
|
|
selectEle.className = ''
|
||
|
|
}
|
||
|
|
selectData=[]
|
||
|
|
}else{
|
||
|
|
selectType = 'radio'
|
||
|
|
document.getElementById("changeSelect").innerHTML = "多选"
|
||
|
|
document.getElementById("checkboxArea").style.display = "none"
|
||
|
|
for(var i = 0;i<hideDom.length;i++){
|
||
|
|
hideDom[i].style.display = "none"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//点击确认按钮
|
||
|
|
document.getElementById("submit").onclick = function(){
|
||
|
|
var content = "";
|
||
|
|
var checkStatus = table.checkStatus('dataTest')
|
||
|
|
var data = checkStatus.data
|
||
|
|
layer.alert(JSON.stringify(data));
|
||
|
|
if(selectType === 'checkbox'){
|
||
|
|
var isOrder = document.getElementById("order").checked
|
||
|
|
var space = document.getElementById("space").value
|
||
|
|
var optionSpace = document.getElementById("optionSpace").value
|
||
|
|
selectData = data;
|
||
|
|
}
|
||
|
|
if(selectData){
|
||
|
|
if(selectType === 'checkbox'){
|
||
|
|
for(var i=0;i<selectData.length;i++){
|
||
|
|
content += (isOrder?(i+1)+space:'' )+ selectData[i].value +optionSpace;
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
content = selectData.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
parent.emrView.InnerView.SetActiveItemText(content);
|
||
|
|
parent.layer.closeAll();
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|