一、完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>課程(科目)管理-報名表-應用中心</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<script src="__STATIC__/layui/layui.js"></script>
<!--<script type="text/javascript" src="__STATIC__/jquery/1.8.3/jquery.min.js"></script>-->
<style>
.border_user{border: 1px solid #e2e2e2;padding: 20px 10px 20px 10px;box-sizing: border-box;background: #f2f2f2;border-radius: 5px;}
.border_user p{margin-top: 5px;color: #999;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.layui-col-space15{margin: ;}
.class0{width: 49%; padding-right: 1%;}
.class1{width: 49%; padding-right: 1%;}
.class2{width: 49%; padding-right: 1%;}
.class3{width: 49%; padding-right: 1%;}
.border_left{position: relative; color: #1E9FFF;font-weight: bold;}
.border_left:after{
display: block;content: '';position: absolute;top: 50%;margin-top: -7px;height: 14px;width: 3px;background: #1E9FFF;color: red;left: 8px;
}
</style>
</head>
<body style="background-color: #FFFFFF;">
<div style="background-color: #F2F2F2;" >
<div class="layui-row layui-col-space10" style="margin: 0;">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<span class="layui-breadcrumb">
<a><cite>首頁</cite></a>
<a href="{:url('index')}">應用中心</a>
<a href="{:url('index')}">{$rs['title']}</a>
<a><cite>{$rsp['title']}</cite></a>
<a><cite>{$rsc['title']}</cite></a>
</span>
</div>
</div>
</div>
{empty name="id"}
<div class="layui-col-md2">
<div class="layui-card">
<div class="layui-card-header"><h3><i class="layui-icon layui-icon-app" style="font-size: 16px; "></i> {$rs['title']}</h3></div>
<div class="layui-card-body">
<ul class="layui-timeline">
{volist name="res" id="v"}
<li class="layui-timeline-item" style="padding-bottom: 10px !important;">
<i class="layui-icon layui-timeline-axis" style="color: #{if $cid==$v['id']}FF5722{else /}c2c2c2{/if};"></i>
<div class="layui-timeline-content layui-text">
<h4 class="layui-timeline-title" {if $cid==$v['id']}style="color: #FF5722; "{/if}><strong>{$v['title']}</strong></h4>
{if condition="$v['child'] neq ''"}
{volist name="v.child" id="v2"}
<p><i style="color: #{if $ccid==$v2['id']}FF5722{else /}01AAED{/if};" class="fa fa-{notempty name="$v2['icon']"}{$v2['icon']}{else /}square-o{/notempty}"></i> <a href="{:url($v2['url'],['tid'=>$tid,'cid'=>$v['id'],'ccid'=>$v2['id']])}" {if $ccid==$v2['id']}style="color: #FF5722; "{/if}>{$v2['title']}</a></p>
{/volist}
{/if}
</div>
</li>
{/volist}
</ul>
<!--<button class="layui-btn layui-btn-fluid layui-btn-normal startSelect" style="padding-bottom: 10px;">初始化下拉框數據</button>-->
</div>
</div>
</div>
{/empty}
{empty name="id"}
<div class="layui-col-md10">
{else /}
<div class="layui-col-md12">
{/empty}
<div class="layui-card">
<div class="layui-card-header">
<h3>
<span class="layui-breadcrumb">
<a><cite>{$rsp['title']}</cite></a>
<a><cite>{$rsc['title']}</cite></a>
</span>
</h3>
</div>
<div class="layui-card-body">
<div class="layui-fluid demoTable" style="margin-top: 20px;" >
<div class="layui-inline layui-form">
<select name="sotype" id="sotype" lay-search>
<option value="">請選擇搜索類型</option>
<option value="title" {if $sotype == "title" }selected {/if}>標題</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="sotitle" id="sotitle" value="{$sotitle}">
</div>
<button class="layui-btn" id="sear" data-type="reload">搜索</button>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<a href="{:url('register_product_add',['tid'=>$tid,'cid'=>$cid,'ccid'=>$ccid])}" class="layui-btn layui-btn-sm layui-btn-primary" ><i class="layui-icon layui-icon-add-circle-fine"></i>增加</a>
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="delAll"><i class="layui-icon layui-icon-delete"></i>批量刪除</button>
</div>
</script>
<script type="text/html" id="barDemo">
<!--<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add_course">排課</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" onclick="{:url('del',array('id'=>$admin['id']))}')">刪除</a>
</script>
<script type="text/html" id="titleTpl">
{{# if(d.type_mold == 1){ }}
<span class="layui-badge layui-bg-blue">直播</span>
{{# } else if (d.type_mold == 2) { }}
<span class="layui-badge layui-bg-cyan">點播</span>
{{# } else { }}
{{# } }}
</script>
<script type="text/html" id="addtypTpl">
{{# if(d.add_type == 1){ }}
線上
{{# } else if (d.add_type == 2) { }}
<span class="layui-badge layui-bg-orange">線下</span>
{{# } else { }}
線上/下
{{# } }}
</script>
<script type="text/html" id="typeTpl">
{{# if(d.type_mold == 1){ }}
<button class="layui-btn layui-btn-xs layui-btn-warm">排課</button>
{{# } else if (d.type_mold == 2) { }}
<button class="layui-btn layui-btn-xs layui-btn-primary">章節</button>
{{# } else { }}
{{# } }}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['layer', 'form','jquery','table','element'], function(){
var layer = layui.layer
,form = layui.form
,$= layui.$
,element = layui.element
,table=layui.table;
table.render({
elem: '#demo'
,url: '{:url('register_product')}'
,limit:10
,method:'post'
,where: {action:'datatable',tid:{$tid},cid:{$cid},ccid:{$ccid}}
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'print', 'exports']
,cellMinWidth: 80
,cols: [[
{type:'checkbox'}
// ,{field:'id', title:'ID', width:70, sort: true}
,{field:'type_mold', title:'模型', width:70, templet: '#titleTpl',sort:true}
,{field:'add_type', title:'類型', width:90, templet: '#addtypTpl',sort:true}
,{field:'title', title:'標題',edit: 'text'}
,{field:'type_mold', title:'排課/章節', width:90, templet: '#typeTpl'}
,{fixed: 'right', title:'操作', width:110, toolbar: '#barDemo'}
]]
,page: true
});
//監聽鎖定操作
form.on('checkbox(lockDemo)', function(obj){
layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
});
//頭工具欄事件
table.on('toolbar(demo)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('選中了:'+ data.length + ' 個');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全選': '未全選');
break;
case 'delAll':
//layer.msg('11');
//批量刪除
var dataall='';
data = checkStatus.data;
//循環把所有要刪除的ID整成12,13,545
for(var i=0;i<checkStatus.data.length;i++){
dataall += data[i].id+",";
}
dataall=dataall.substring(0,dataall.length-1)
//layer.alert(dataall);
layer.confirm('真的刪除行麼', function(index){
//obj.del();
//id= data.id;
layer.close(index);
$.ajax({
url:'{:url('register_product_del')}',
type:"post",
data:{id:dataall,m:0},
async:true,
success:function(data){
if(data[0]==1){
layer.msg('成功!');
table.reload('demo');//重新加載表格數據
}else{
layer.msg('失敗!'+data[1]);
}
},
error:function(){
layer.msg('頁面跳轉失敗!');
}
});
});
break;
};
});
//排序
table.on('sort(demo)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值"
//儘管我們的 table 自帶排序功能,但並沒有請求服務端。
//有些時候,你可能需要根據當前排序的字段,重新向服務端發送請求,如:
table.reload('demo', {
initSort: obj //記錄初始排序,如果不設的話,將無法標記表頭的排序狀態。 layui 2.1.1 新增參數
,where: { //請求參數
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
var $ = layui.$, active = {
//搜索
reload: function(){
//var demoReload = $('#sotitle').val();
table.reload('demo', {
where: {
sotype: $("#sotype").val()
,limit: $('#limit').val()
,sotitle: $('#sotitle').val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
//$(document).on('click','#sear',function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//按enter鍵進行查詢
$(document).keyup(function(event){
if(event.keyCode==13){
var type = $("#sear").data('type');
active[type] ? active[type].call(this) : '';
}
});
//監聽單元格編輯
table.on('edit(demo)', function(obj){
var value = obj.value //得到修改後的值
,data = obj.data //得到所在行所有鍵值
,field = obj.field; //得到字段
// layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改爲:'+ value);
$.ajax({
type: "post",
url: '{:url('register_product_edit')}',
data: {id:data.id,title:value,field:field,action:'ajax_update'},
//dataType: "json",
success: function(data){
// layer.msg(data['code']);
if(data['code']==1){
//成功
//更新緩存中的值
data[field] = data['title'];
layer.msg(data['msg']);
//ptable()
}else{
layer.msg(data['msg']);
// setTimeout(function(){
// self.location='{:url('register_class',['tid'=>$tid,'cid'=>$cid,'ccid'=>$ccid,'id'=>$id])}';
// },1000)
}
// layer.msg('更新失敗!');
},
error: function(){
layer.msg('更新失敗!');
}
});
});
//監聽工具條
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的刪除行麼', function(index){
obj.del();
id= data.id;
layer.close(index);
$.ajax({
url:'{:url('register_product_del')}',
type:"post",
data:{id:id,m:0},
async:true,
success:function(data){
if(data[0]==1){
layer.msg(data[1]);
table.render({});//重新渲染
}else{
layer.msg('失敗!'+data[1]);
table.render({});//重新渲染
}
},
error:function(){
layer.msg('更新失敗!');
}
});
});
} else if(obj.event === 'edit'){
//編輯
//layer.alert('編輯行:<br>'+ JSON.stringify(data))
layer.ready(function(){
layer.open({
type: 2,
title: '編輯報名表',
maxmin: true,
area: ['95%', '95%'],
content: '{:url('register_product_edit')}?tid={$tid}&cid={$cid}&ccid={$ccid}&id='+data.id,
cancel: function(){ //刷新網頁
table.reload('demo');//重新加載表格數據
// self.location='{:url('index')}';
}
});
});
}
});
});
</script>
<!-- 引入分類 多選樣式 開始 -->
<script type="text/javascript" src="__STATIC__/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/menu/formSelects/formSelects-v4.css"/>
<script src="__STATIC__/menu/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var formSelects = layui.formSelects;
formSelects.data('select15_2', 'server', {
type: "post",
url: '{:url('menu/menujsondata')}',
data:{action:'js_category',model:'12,13'},
linkage: true,
linkageWidth: 130,
searchUrl: '', //搜索地址, 默認使用xm-select-search的值, 此參數優先級高
searchName: 'keyword', //自定義搜索內容的key值
searchVal: '', //自定義搜索內容, 搜素一次後失效, 優先級高於搜索框中的值
keyName: 'name', //自定義返回數據中name的key, 默認 name
keyVal: 'value', //自定義返回數據中value的key, 默認 value
keySel: 'selected', //自定義返回數據中selected的key, 默認 selected
keyDis: 'disabled', //自定義返回數據中disabled的key, 默認 disabled
keyChildren: 'children', //聯動多選自定義children
delay: 500, //搜索延遲時間, 默認停止輸入500ms後開始搜索
direction: 'auto', //多選下拉方向, auto|up|down
response: {
statusCode: 0, //成功狀態碼
statusName: 'code', //code key
msgName: 'msg', //msg key
dataName: 'data' //data key
},
success: function(id, url, searchVal, result){ //使用遠程方式的success回調
//如果有需要默認值的小夥伴請使用formSelects.value
// formSelects.value('select15_2', ['349/417/419', '349/413/415'],true);
formSelects.value('select15_2', [{$category_edit}],true);
// console.log(id); //組件ID xm-select
// console.log(url); //URL
// console.log(searchVal); //搜索的value
// console.log(result); //返回的結果
},
error: function(id, url, searchVal, err){ //使用遠程方式的error回調
//同上
//console.log(err); //err對象
},
beforeSuccess: function(id, url, searchVal, result){ //success之前的回調, 幹嘛呢? 處理數據的, 如果後臺不想修改數據, 你也不想修改源碼, 那就用這種方式處理下數據結構吧
// console.log(id); //組件ID xm-select
// console.log(url); //URL
// console.log(searchVal); //搜索的value
// console.log(result); //返回的結果
//
return result; //必須return一個結果, 這個結果要符合對應的數據結構
},
beforeSearch: function(id, url, searchVal){ //搜索前調用此方法, return true將觸發搜索, 否則不觸發
if(!searchVal){//如果搜索內容爲空,就不觸發搜索
return false;
}
return true;
},
clearInput: false, //當有搜索內容時, 點擊選項是否清空搜索內容, 默認不清空
});
</script>
<!-- 引入分類 多選樣式 結束 -->
</body>
</html>
$where = new Where;
$sotitle=input('sotitle');
$category=input('category');
if($category){
$category_select="'".$category."'";
}
$this->assign('category_select',$category_select);
$action=input('action');
$sotype=input('sotype');
$page=input('page');//頁數
$field=input('field');//字段
$order=input('order');//排序方式
$limit=input('limit');
$limit=$limit?$limit:10;
$this->assign('sotype',$sotype);
$this->assign('sotitle',$sotitle);
$this->assign('limit',$limit);
if($action=='datatable'){
if($sotitle){
//模糊查詢
if($sotype=="title" || $sotype==""){
// $where = [
// ['title', 'like', "%".$sotitle."%"],
// ];
$where['title'] = ['like', "%".$sotitle."%"];
}else{
$where[$sotype] = $sotitle;
}
}
//排序
if($field){
$od=$field." ".$order;
}else{
$od="id desc";
}
if($category){
$where[] = ['exp',Db::raw("FIND_IN_SET('$category',category)")];
}else{
$where['deleted'] = 0;//顯示正常數據,不顯示回收站數據
}
$where['deleted'] = 0;
$list=Db::name('products')->field('id,title,time')->where($where)->order($od)->limit($limit)->page($page)->select();
$rs1=Db::name('product')->field('id')->where($where)->count();
json(0,'數據返回成功',$rs1,$list);
}
標題修改控制器代碼
$id=input('id');
$action=input('action');
//ajax 更新標題
if($action=="ajax_update" && $id){//更新字段值
$field=input('field');
$title=input('title');
//判斷是否重複
$where1[$field] = $title;
$where1['deleted'] = 0;//狀態 0正常 1回收站
$checkRepeat=checkRepeat('class',$where1,0,'');
if($checkRepeat>0){
$this->error('錯誤:已經存在');
}
//$field=$field=="name"?"title":$field;//當字段是name是要轉換成數據庫對應的字段title
$rsj=Db::name('product')->where('id', $id)->update([$field => $title]);
if($rsj){
$arr['code']=1;
$arr['msg']="更新成功";
$arr['title']=$title;
//$se="更新成功";
}else{
$arr['code']=2;
$arr['msg']="更新失敗";
$arr['title']=$title;
}
return $arr;die;
}
二、簡單例子
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>查看缺勤學生</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<script src="__STATIC__/layui/layui.js"></script>
</head>
<body style="background-color: #FFFFFF;">
<!-- 你的HTML代碼 -->
<!-- 表格 -->
<div class="layui-fluid demoTable" style="margin-top: 20px;" >
<div class="layui-inline">
<input class="layui-input" name="limit" id="limit" style="width: 50px;" placeholder="行數" value="{empty name="limit"}10{else /}{$limit}{/empty}" >
</div>
<div class="layui-inline layui-form">
<select name="sotype" id="sotype" lay-search>
<option value="">請選擇搜索類型</option>
<option value="name" {if $sotype == "name" }selected {/if}>用戶名</option>
<option value="real_name" {if $sotype == "real_name" }selected {/if}>真實姓名</option>
<!--<option value="tel" {if $sotype == "tel" }selected {/if}>電話</option>-->
<!--<option value="email" {if $sotype == "email" }selected {/if}>郵箱</option>-->
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="sotitle" id="sotitle" value="{$sotitle}">
</div>
<button class="layui-btn" id="sear" data-type="reload">搜索</button>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="Record">跟蹤進度</a>
</script>
<script type="text/html" id="titleTpl">
{{# if(d.state == 1){ }}
已處理
{{# } else if (d.state == 2) { }}
<span class="layui-badge layui-bg-cyan">完結</span>
{{# } else { }}
<span class="layui-badge">未處理</span>
{{# } }}
</script>
</div>
<!-- 表格end -->
<!-- 表格end -->
<script>
layui.use(['layer', 'form','jquery','table'], function(){
var layer = layui.layer
,form = layui.form
,$= layui.$
,table=layui.table;
table.render({
elem: '#demo'
,url: '{:url('view_user')}'
,limit:10
,method:'post'
,where: {action:'datatable',uid: {$uid}}
,cellMinWidth: 80
,cols: [[
{type:'checkbox'}
// ,{field:'id', title:'ID', width:70, sort: true}
,{field:'state', title:'狀態', width:80, templet: '#titleTpl'}
,{field:'name', title:'用戶名', width:200}
,{field:'real_name', title:'姓名', width:100}
,{field:'pname', title:'課程', width:300}
,{field:'pname', title:'章節', width:300}
,{field:'cname', title:'班型', width:150}
,{fixed: 'right', title:'操作', width:100, toolbar: '#barDemo'}
]]
,page: true
});
//監聽鎖定操作
form.on('checkbox(lockDemo)', function(obj){
layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
});
//排序
table.on('sort(demo)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值"
//儘管我們的 table 自帶排序功能,但並沒有請求服務端。
//有些時候,你可能需要根據當前排序的字段,重新向服務端發送請求,如:
table.reload('demo', {
initSort: obj //記錄初始排序,如果不設的話,將無法標記表頭的排序狀態。 layui 2.1.1 新增參數
,where: { //請求參數
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
var $ = layui.$, active = {
//搜索
reload: function(){
//var demoReload = $('#sotitle').val();
table.reload('demo', {
where: {
sotype: $("#sotype").val()
,limit: $('#limit').val()
,sotitle: $('#sotitle').val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
//$(document).on('click','#sear',function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//按enter鍵進行查詢
$(document).keyup(function(event){
if(event.keyCode==13){
var type = $("#sear").data('type');
active[type] ? active[type].call(this) : '';
}
});
//監聽工具條
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'Record'){
//跟蹤進度
layer.ready(function(){
layer.open({
type: 2,
title: '記錄['+data.real_name+']跟蹤進度',
maxmin: true,
area: ['98%', '95%'],
content: '{:url('view_user')}?action=addrecord&uid={$uid}&id='+data.id,
});
});
}
});
});
</script>
</body>
</html>
控制器:
$action=input('action');
$sotitle=input('sotitle');
$sotype=input('sotype');
$limit=input('limit');
$limit=$limit?$limit:1;
$this->assign('sotype',$sotype);
$this->assign('sotitle',$sotitle);
$this->assign('limit',$limit);
if($action=="datatable"){
$field=input('field');//字段
$order=input('order');//排序方式
//排序
if($field){
$od=$field." ".$order;
}else{
$od="id desc";
}
if($sotitle){
$where['title'] = ['like', "%".$sotitle."%"];
}
$where['deleted'] = 0;//狀態 0正常 1回收站
$rsu=Db::name('comment')->where($where)->where('pid',$id)->order($od)->limit($limit)->page($page)->select();
$rsu1=Db::name('comment')->where($where)->where('pid',$id)->select();
$count = count($rsu1);//取得記錄集總條數
json(0,'數據返回成功',$count,$rsu);
return $data;
}