layui 无限及分类 利用的是treetable插件，然后在列表加搜索功能
先来看一下页面如下图
我呢，项目实际需求是加店铺下拉框搜索，方便查找
html页面部分代码如下：
js搜索核心代码如下
$('body').on("click","#btn-search",function(){
var demoReload = $('#edt-search'); //得到搜索框里已输入的数据
// //执行重载
table.reload('currentTableRenderId', {
page: {
curr: 1 //重新从第 1 页开始
}
,
url: ea.url(init.index_url)
,where: {
store_id: demoReload.val() //在表格中进行搜索
}
}, 'data');
return false;
});js完整代码如下
define(["jquery", "easy-admin", "treetable", "iconPickerFa", "autocomplete"], function ($, ea) {
var table = layui.table,
treetable = layui.treetable,
iconPickerFa = layui.iconPickerFa,
autocomplete = layui.autocomplete;
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'management.store_cate/index',
add_url: 'management.store_cate/add',
delete_url: 'management.store_cate/delete',
edit_url: 'management.store_cate/edit',
platform_url: 'management.store_cate/platform',
modify_url: 'management.store_cate/modify',
};
// console.log(ea)
var Controller = {
index: function () {
var renderTable = function () {
layer.load(2);
treetable.render({
treeColIndex: 1,
treeSpid: 0,
homdPid: 99999999,
treeIdName: 'store_category_id',
treePidName: 'pid',
treeDefaultClose: true,//是否默认折叠
treeLinkage: true,//父级展开时是否自动展开所有子级
even:true, //开启间隔行变色
url: ea.url(init.index_url),
elem: init.table_elem,
id: init.table_render_id,
toolbar: '#toolbar',
// defaultToolbar: ['filter', 'print', 'exports', {
// title: '搜索',
// layEvent: 'TABLE_SEARCH',
// icon: 'layui-icon-search',
// extend: 'data-table-id="' + init.table_render_id + '"'
// }],
page: true,
limit:10 , //默认十条数据一页
limits: [10, 20, 30, 50], //数据分页条
skin: 'line',
//@todo 不直接使用ea.table.render(); 进行表格初始化, 需要使用 ea.table.formatCols(); 方法格式化`cols`列数据
cols: ea.table.formatCols([[
{type: 'checkbox'},
{field: 'cate_name', width: 300, title: '分类名称', align: 'left'},
{field: 'shop_name', width: 250, title: '所属店铺', align: 'left'},
{field: 'image', width: 100, title: '分类图片', templet: ea.table.image,search:false},
{field: 'describe', minWidth: 120, title: '描述',search:false},
{field: 'status', title: '是否显示', width: 85, templet: ea.table.switch,search:false},
{field: 'is_show', title: '收银端状态', width: 100, selectList: {0: '不显示', 1: '显示'}, templet: ea.table.switch,search:false},
{field: 'sort', width: 80, title: '排序', edit: 'text',search:false},
{
minWidth: 200,
title: '操作',
templet: ea.table.tool,toolbar: '#barDemo'
// operat: [
// [{
// text: '添加子分类',
// url: init.add_url,
// field:'store_category_id',
// method: 'open',
// auth: 'add',
// class: 'layui-btn layui-btn-xs layui-btn-normal',
// extend: 'data-full="false"',
// },{
// text: '编辑',
// url: init.edit_url,
// field:'store_category_id',
// method: 'open',
// auth: 'edit',
// class: 'layui-btn layui-btn-xs layui-btn-success',
// extend: 'data-full="false"',
// },{
// title:'确定删除？',
// text: '删除',
// field:'store_category_id',
// url: init.delete_url,
// method: 'delete',
// class: 'layui-btn layui-btn-danger layui-btn-xs',
// }],
// ]
}
]], init),
done: function () {
layer.closeAll('loading');
// bindTableToolbarFunction();
}
});
};
renderTable();
$('body').on('click', '[data-treetable-refresh]', function () {
renderTable();
});
$('body').on("click","#btn-search",function(){
var demoReload = $('#edt-search'); //得到搜索框里已输入的数据
// //执行重载
table.reload('currentTableRenderId', {
page: {
curr: 1 //重新从第 1 页开始
}
,
url: ea.url(init.index_url)
,where: {
store_id: demoReload.val() //在表格中进行搜索
}
}, 'data');
return false;
// var keyword = $('#edt-search').val();
// var searchCount = 0;
// $('#currentTable').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
// $(this).css('background-color', 'transparent');
// var text = $(this).text();
// // if(keyword != '' && text.indexOf(keyword)==-1){
// // console.log(text.indexOf(keyword))
// // $(this).parent().addClass('layui-hide');
// // }
// console.log(text.indexOf(keyword))
// if (keyword != '' && text.indexOf(keyword) >= 0) {
// $(this).parent().css('background-color', 'rgba(250,230,160,0.5)');
// // $(this).parent().removeClass('layui-hide');
// if (searchCount == 0) {
// treetable.expandAll('#currentTable');
// $('html,body').stop(true);
// $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
// }
// searchCount++;
// }
// });
// if (keyword == '') {
// layer.msg("请输入搜索内容", {icon: 5});
// } else if (searchCount == 0) {
// layer.msg("没有匹配结果", {icon: 5});
// }
});
$('body').on('click', '[data-treetable-delete]', function () {
var tableId = $(this).attr('data-treetable-delete'),
url = $(this).attr('data-url');
tableId = tableId || init.table_render_id;
url = url != undefined ? ea.url(url) : window.location.href;
var checkStatus = table.checkStatus(tableId),
data = checkStatus.data;
if (data.length <= 0) {
ea.msg.error('请勾选需要删除的数据');
return false;
}
var ids = [];
$.each(data, function (i, v) {
ids.push(v.store_category_id);
});
ea.msg.confirm('确定删除？', function () {
ea.request.post({
url: url,
data: {
store_category_id: ids
},
}, function (res) {
ea.msg.success(res.msg, function () {
renderTable();
});
});
});
return false;
});
ea.table.listenSwitch({filter: 'status', url: init.modify_url});
ea.table.listenSwitch({filter: 'is_show', url: init.modify_url});
ea.table.listenEdit(init, 'currentTable', init.table_render_id, true);
ea.table.listenToolbar('currentTable',init.table_render_id);
ea.table.renderSearch(ea.table.formatCols([[
{type: 'checkbox'},
{field: 'cate_name', width: 300, title: '分类名称', align: 'left'},
{field: 'shop_name', width: 250, title: '所属店铺', align: 'left',selectList: $("#areaId").val(),area:1,areaname:'store_id'},
{field: 'image', width: 100, title: '分类图片', templet: ea.table.image,search:false},
{field: 'describe', minWidth: 120, title: '描述',search:false},
{field: 'status', title: '是否显示', width: 85, templet: ea.table.switch,search:false},
{field: 'is_show', title: '收银端状态', width: 100, selectList: {0: '不显示', 1: '显示'}, templet: ea.table.switch,search:false},
{field: 'sort', width: 80, title: '排序', edit: 'text',search:false},
{
minWidth: 200,
title: '操作',
templet: ea.table.tool,toolbar: '#barDemo'
}
]]), init.table_elem,init.table_render_id);
ea.listen();
},
add: function () {
iconPickerFa.render({
elem: '#icon',
url: PATH_CONFIG.iconLess,
limit: 12,
click: function (data) {
$('#icon').val('fa ' + data.icon);
},
success: function (d) {
console.log(d);
}
});
autocomplete.render({
elem: $('#href')[0],
url: ea.url('managment.store_cate/getMenuTips'),
template_val: '{{d.node}}',
template_txt: '{{d.node}} {{d.title}}',
onselect: function (resp) {
}
});
ea.listen(function (data) {
return data;
}, function (res) {
ea.msg.success(res.msg, function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.$('[data-treetable-refresh]').trigger("click");
});
});
},
edit: function () {
iconPickerFa.render({
elem: '#icon',
url: PATH_CONFIG.iconLess,
limit: 12,
click: function (data) {
$('#icon').val('fa ' + data.icon);
},
success: function (d) {
console.log(d);
}
});
autocomplete.render({
elem: $('#href')[0],
url: ea.url('managment.store_cate/getMenuTips'),
template_val: '{{d.node}}',
template_txt: '{{d.node}} {{d.title}}',
onselect: function (resp) {
}
});
ea.listen(function (data) {
return data;
}, function (res) {
ea.msg.success(res.msg, function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.$('[data-treetable-refresh]').trigger("click");
});
});
},
platform: function () {
ea.listen();
},
};
return Controller;
});php后端代码
public function index()
{
if ($this->request->isAjax()) {
if (input('selectFields')) {
return $this->selectList();
}
list($page, $limit, $where) = $this->buildTableParames();
$seach=Request::param();
if($seach){
array_push($where,['store_id','=',$seach['store_id']]);
}
$count = $this->model->where($where)->count();
// ->page($page, $limit)
$list = $this->model->with('store')->order($this->sort)->where($where)->select()->bindAttr('store', ['shop_name' => 'store_name']);
foreach ($list as $k => $v) {
$area=Db::name('area')->where('id',$v['store']['area_id'])->value('shortname');
$list[$k]['shop_name']=$v['shop_name']."【".$area."】";
}
$list=$this->model->getLevel($list);
$data = [
'code' => 0,
'msg' => '',
'count' => $count,
'data' => $list,
];
return json($data);
}
return $this->fetch();
}我的项目后端是thinkphp6+layui座位后端框架开发的。