数据库里建设好的网站为什么外网进不去网站,怎么更改网站首页图片,网站容易做吗,一个完美的网站怎么做目录
一、下载layui-soul-table
二、使用
三、Layui实际使用
1、html代码
2、JS代码
3、PHP后台代码 目的#xff1a;使用Layui的数据表格#xff0c;拖动行进行排序。
使用插件#xff1a;layui-soul-table 和 Layui
1.layui-soul-table文档#xff1a;https://…目录
一、下载layui-soul-table
二、使用
三、Layui实际使用
1、html代码
2、JS代码
3、PHP后台代码 目的使用Layui的数据表格拖动行进行排序。
使用插件layui-soul-table 和 Layui
1.layui-soul-table文档https://soultable.yelog.org/#/zh-CN/component/start/install
2.layui文档Layui table模块 | 数据表格 | datatable - 在线演示
结合Layui并参看layui-soul-table官方教程写的比较详细页比较简单。
实现效果可以拖动行进行排序可以搜索 一、下载layui-soul-table
把下载好的文件放到项目中比如说放到public文件夹下的/ext/soulTable/下下载的内容很多不需要全部都放到目录下只需要把用到拷贝进来就行如下图 二、使用
因为需求是实现拖动排序所以只用到了soulTable.slim.js layui.config({base: /ext/, // 第三方模块所在目录version: v1.6.4 // 插件版本号
}).extend({ soulTable: soulTable/soulTable.slim // 模块
}); 三、Layui实际使用
1、html代码 有几个需要注意的地方 1、搜索按钮的lay-filter要一致 2、lay-event对应下面的toolbar div classlayui-form layui-card-header layuiadmin-card-header-auto!-- 搜索 start --form classlayui-form layui-form-pane stylefloat:leftdiv classlayui-form-itemlabel classlayui-form-label视频名称/labeldiv classlayui-input-inlineinput typetext namefilename placeholder视频名称 autocompleteoff classlayui-input value/divbutton classlayui-btn layui-btn-normal lay-submit lay-filterdemo-table-searchi classfa fa-search aria-hiddentrue/i 搜 索/button/div/form!-- 搜索 end --/divdiv classlayui-card-body stylewidth: 96%; margin: 0 auto; overflow-x: auto;table idmyTable lay-filtertest idtest/table!-- script typetext/html idmyBar /script --script typetext/html idpreviewbutton typebutton classlayui-btn layui-btn-sm lay-eventpreview i classfa fa-eye aria-hiddentrue/i 预览/button/scriptscript typetext/html idbarDemoa classlayui-btn layui-btn-sm layui-btn-normal lay-eventediti classfa fa-edit aria-hiddentrue/i 修改 /aa classlayui-btn layui-btn-sm layui-btn-primary lay-eventdel i classfa fa-trash aria-hiddentrue/i 删除/a/script
/div
2、JS代码 1、引入soulTable注意路径我存放的路径是在/public/ext/soulTable/下 2、extend引入的模块可以根据自己需求添加 3、table.render()下的id和elem要和上面HTML中的table的id一致 4、rowDrag下的done里面的是拖动时触发的事件可以从这里获取拖动行的数据信息并在这里更新数据库 5、cols里的就是列名列名对应上就行 6、done下的代码是刷新拖动之后的表格的勿删 7、搜索提交其实就是数据表格的重载可以参考Layui官网我这里为了后端接收方便所有和Layui官网的示例有些出入。注意lay-filter监听要一致其中table.reload下的myTable也要和上面HTML的一致用于标识重载的表格 8、监听行工具事件根据event的不同处理不同的业务 layui.config({base: /ext/, // 第三方模块所在目录version: v1.6.4 // 插件版本号
}).extend({ soulTable: soulTable/soulTable.slim // 模块
});layui.use([element, layer,form,table,soulTable], function(){var $ layui.jquery,layer layui.layer,element layui.element,form layui.form,table layui.table,soulTable layui.soulTable;var myTable table.render({id: myTable,elem: #myTable,url: videoquery// ,toolbar: #myBar,height: 500,rowDrag: {done: function(obj) {// 完成时松开时触发// 如果拖动前和拖动后无变化则不会触发此方法// console.log(obj.row) // 当前行数据// console.log(obj.cache) // 改动后全表数据// console.log(obj.oldIndex) // 原来的数据索引// console.log(obj.newIndex) // 改动后数据索引var row_id obj.row.id // 当前idvar row_sort obj.newIndex1 // 拖动后的排序// console.log(row_id)// console.log(row_sort)$.ajax({url:/teacher/video/upsort,type:POST,dataType:JSON,data:{id:row_id,sort:row_sort},success:function (res) {console.log(res)}})}},totalRow: true,cols: [[{field: filename, title: 视频名称, width: 20%, fixed: left},{field: kejian, title: 关联课件, width: 30%, height:auto, fixed: left},{fixed: right, title:预览, toolbar: #preview, width:20%},{fixed: right, title:操作, toolbar: #barDemo, width:30%}]],page: true,done: function () {soulTable.render(this)}});// 搜索提交form.on(submit(demo-table-search), function(data){var field data.field; // 获得表单字段// console.log(field)// 执行搜索重载table.reload(myTable, { page: {curr: 1 // 重新从第 1 页开始},where: field // 搜索的字段});return false; // 阻止默认 form 跳转});//监听行工具事件table.on(tool(test), function(obj){var data obj.data;//console.log(obj)if(obj.event preview){// console.log(data)// 预览window.open(data.path);}else if(obj.event del){// console.log(data.id)layer.confirm(确定删除吗, {icon: 3, title:提示}, function(index){$.ajax({ url:del,type:POST,dataType:JSON,data:{id:data.id},success:function (res) {if (res.code 200) {layer.msg(res.message);obj.del();}else{layer.msg(res.message);return false;}}})});} else if(obj.event edit){// console.log(data.id)window.location.hrefedit.html?iddata.id;}});});
3、PHP后台代码 主要是添加了搜索返回的是JSON数据 public function videoquery(){$map array();$filename trim(input(param.filename));if (!empty($filename)) {$map[video.filename] array(like,%$filename%);}$list model(Video)-getList($this-tid,$map);// p($list);apiResponse(0,success,$list);}
