layui之grid栅格布局偷师与laypage分页后台数据控制
2021-03-31 本文已影响0人
牵手生活
叨叨
不熟悉前端知识点，感觉前端好像比逆向和后端开发更麻烦。
目标
栅格目标
image.png
绑定数据和分页
绑定展示效果1
初步 尝试grid布局
image.png
image.png
<!--栅格记录-->
<div class="layui-bg-black" >
<div class="layui-row "id="div_materialGrid">
<div>测试</div>
</div>
<!-- 有边距-->
<div class="layui-row " >
<!-- 第一个图片-->
<div class="layui-col-md4 layui-bg-green" style="border: red">
<div class="layui-bg-cyan">
1/3-1(img+txt图文)除了H&M，阿迪、耐克、优衣库、无印良品等大牌也抵制新疆棉花
</div>
<div >
<img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="200" height="200">
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
<!-- 第2个link连接素材-图文-->
<div class="layui-col-md4 layui-col-space3 layui-bg-green" >
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(link)微信逆向之---给微信朋友圈添加控件——笔记</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
desc牵手生活--今日头条号 微信逆向之---给微信朋友圈添加控件——笔记
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
<!-- 第3个 文字素材-->
<div class="layui-col-md4 layui-bg-green" >
<div class="layui-bg-cyan">
1/3-3 (txt) LayIM 前端文档
</div>
<div >
LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，采用 HTML、CSS、JavaScript 编写，其包含的只是一套前端源代码素材和相关的模拟示例，不具备后台程序以数据库存储等功能。因此实际使用时，需要自己开发后端语言或对接云服务平台（如：融云、环信等）。
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
<!-- 第4个 视频素材-->
<div class="layui-col-md4 layui-bg-green" >
<div class="layui-bg-orange">
1/3-3 (vedio)视频描述-微信奇怪菜单
</div>
<div >
<video id="video" width="200" height="100" src="http://qny-mpkj.51wxfd.club/1615885633066.mp4" controls autoplay>
</video>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
<!-- 第5个smallApp小程序素材-小程序-->
<div class="layui-col-md4 layui-col-space3 layui-bg-green" >
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(smallApp)李宁羽毛球-ff3306系列</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
冒险世界商城
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
<!-- 第6个file素材-文件-->
<div class="layui-col-md4 layui-col-space3 layui-bg-green" >
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(file)Visual C#从入门到精通 第九版.docx</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
<a class="layui-btn icon-btn layui-btn-normal " href="https://jjc.qiniu.maijiacloud.cn/ae7b3b45792d4b63a56f59a9db3697eb" >下载</a>
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="50" height="50">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
</div>
问题1：间隔问题
我设置了间隔为10px （layui-col-space10） 可看效果没有间隔
不过查看元素是有间隔
image.png
image.png
解决办法：设置背景颜色不要设置在layui-col-md* 类上，而是应该设置在layui-col-md*的下一层的对象div上即可。
image.png
<div class="layui-container" >
<div class="layui-row "id="div_materialGrid">
<div>测试</div>
</div>
<!-- 有边距-->
<div class="layui-row layui-col-space10" >
<!-- 第一个图片-->
<div class="layui-col-md4 " >
<div class="layui-bg-red">
<div class="layui-bg-cyan ">
1/3-1(img+txt图文)除了H&M，阿迪、耐克、优衣库、无印良品等大牌也抵制新疆棉花
</div>
<div >
<img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="200" height="200">
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
<!-- 第2个link连接素材-图文-->
<div class="layui-col-md4" >
<div class="layui-bg-red">
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(link)微信逆向之---给微信朋友圈添加控件——笔记</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
desc牵手生活--今日头条号 微信逆向之---给微信朋友圈添加控件——笔记
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
<!-- 第3个 文字素材-->
<div class="layui-col-md4 " >
<div class="layui-bg-red">
<div class="layui-bg-cyan">
1/3-3 (txt) LayIM 前端文档
</div>
<div >
LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，采用 HTML、CSS、JavaScript 编写，其包含的只是一套前端源代码素材和相关的模拟示例，不具备后台程序以数据库存储等功能。因此实际使用时，需要自己开发后端语言或对接云服务平台（如：融云、环信等）。
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
<!-- 第4个 视频素材-->
<div class="layui-col-md4 " >
<div class="layui-bg-red">
<div class="layui-bg-orange">
1/3-3 (vedio)视频描述-微信奇怪菜单
</div>
<div >
<video id="video" width="200" height="100" src="http://qny-mpkj.51wxfd.club/1615885633066.mp4" controls autoplay>
</video>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
<!-- 第5个smallApp小程序素材-小程序-->
<div class="layui-col-md4" >
<div class="layui-bg-red">
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(smallApp)李宁羽毛球-ff3306系列</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
冒险世界商城
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
<!-- 第6个file素材-文件-->
<div class="layui-col-md4 " >
<div class="layui-bg-red">
<div class="layui-bg-blue">
<a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(file)Visual C#从入门到精通 第九版.docx</a>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md2">
<a class="layui-btn icon-btn layui-btn-normal " href="https://jjc.qiniu.maijiacloud.cn/ae7b3b45792d4b63a56f59a9db3697eb" >下载</a>
</div>
<div class="layui-col-md2">
<img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="50" height="50">
</div>
</div>
<div class="layui-row layui-col-space1 ">
<div class="layui-col-md4">
2021-03-17 14:51:23
</div>
<div class="layui-col-md2 " style="border-color: #00a2d4">
<a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>
</div>
<div class="layui-col-md2">
<a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
</div>
</div>
</div>
</div>
</div>
</div>
效果图
image.png
问题2：如何从后台获取数据与分页控件进行绑定
绑定展示效果
绑定展示效果1
绑定展示效果2
后台controler代码
/**
* 查询 素材库--栅格方式查询时用到
*/
@RequestMapping("/listGrid")
@Permission
@ResponseBody
public Object listGrid(@RequestParam(required = true) int argPage, //第几页
@RequestParam(required = true) int arglimit, //每页显示多少条
@RequestParam(required = false) Long deptId,
@RequestParam(required = false) String beginTime,
@RequestParam(required = false) String endTime,
@RequestParam(required = false) String type) {
//获取分页参数
//Page page = LayuiPageFactory.defaultPage();
Page page = new Page(argPage,arglimit);
List<Map<String, Object>> result = null;
if (LoginContextHolder.getContext().isAdmin()){
result = materialService.getMaterials(page,beginTime,endTime,type,deptId);
}else {
DataScope dataScope = new DataScope(LoginContextHolder.getContext().getDeptDataScope());
result = result = materialService.getMaterials(page,beginTime,endTime,type,deptId);;
}
page.setRecords(new DeviceInfoWrapper(result).wrap());
return LayuiPageFactory.createPageInfo(page);
}
html部分
<!-- 查询、添加等操作工具-->
<div class="ui-layout-center">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-form-item">
<div class="layui-inline">
<input id="beginTime" class="layui-input" type="text" placeholder="开始时间" autocomplete="off"/>
</div>
<div class="layui-inline">
<input id="endTime" class="layui-input" type="text"placeholder="结束时间" autocomplete="off"/>
</div>
<div class="layui-inline">
<select id="type">
<option value="">全部类型</option>
<option value="1">1-文字素材</option>
<option value="2">2-图片素材</option>
<option value="3">3-（图文）链接素材</option>
<option value="4">4-视频素材</option>
<option value="5">5-小程序素材</option>
<option value="6">6-文件素材</option>
</select>
</div>
<div class="layui-inline">
<button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button>
@if(shiro.hasPermission("/customer/add")){
<button id="btnAdd_txt" class="layui-btn icon-btn"><i class="layui-icon"></i>添加文字素材</button>
<button id="btnAdd_img" class="layui-btn icon-btn"><i class="layui-icon"></i>添加图文素材</button>
<button id="btnAdd_link" class="layui-btn icon-btn"><i class="layui-icon"></i>添加链接素材</button>
<button id="btnAdd_video" class="layui-btn icon-btn"><i class="layui-icon"></i>添加视频素材</button>
<button id="btnAdd_smallApp" class="layui-btn icon-btn"><i class="layui-icon"></i>添加小程序素材</button>
<button id="btnAdd_file" class="layui-btn icon-btn"><i class="layui-icon"></i>添加文件素材</button>
@}
</div>
</div>
</div>
<table class="layui-table" id="materialTable" lay-filter="materialTable"></table>
</div>
</div>
</div>
</div>
<!--栅格记录 奇怪使用 class="layui-container" 类好像莫名其妙多留了很多边框 class="layui-bg-black没有-->
<!-- <div class="layui-bg-black" > -->
<div >
<div class="layui-row layui-col-space20"id="div_materialGrid">
<div>测试</div>
</div>
<div class="layui-row layui-col-space20">
<div>======</div>
</div>
<!-- 分页元素-->
<div id="test1laypage"></div>
</div>
js部分
/**
* 系统管理--操作日志
*/
var MsgMaterial = {
condition: {
deptId: ""
,curr: 1 //用于记录分页控件当前查询的页码
,limit :8 //得到每页显示的条数
}
};
layui.use(['layer','laypage', 'laypage', 'admin', 'ax', 'laydate', 'ztree', 'func', 'tree'], function () {
var $ = layui.$;
var $ax = layui.ax;
var layer = layui.layer;
var laypage = layui.laypage;
var laydate = layui.laydate;
var admin = layui.admin;
var $ZTree = layui.ztree;
var tree = layui.tree;
/**
* 点击查询按钮
*/
MsgMaterial.search = function () {
var queryData = {};
queryData['deptId'] = MsgMaterial.condition.deptId;
queryData['beginTime'] = $("#beginTime").val();
queryData['endTime'] = $("#endTime").val();
queryData['type'] = $("#type").val();
MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,true);//调用
};
/**
* 初始化栅格--获取数据
* Laypage完整分页示例 https://blog.csdn.net/qq_45244974/article/details/107285795
*/
MsgMaterial.initGrid_getData = function (page,argLimit,argFirst) {
var ajax = new $ax(Feng.ctxPath + "/material/listGrid", function (data) {
if(argFirst){//用于控制分页控件的渲染，如果没有这么控制的话，查询第二或最后一页时，渲染的控件按钮焦点都是第一个控件
//执行一个laypage实例
laypage.render({
elem: 'test1laypage' //注意，这里的 test1 是 ID，不用加 # 号
,limit: argLimit
, limits: [5, 10, 20] //每页条数的选择项
,count: data.count//50 //数据总数，从服务端得到
,jump: function(obj, first){//点击分页不同不同按钮是，会调用该方法
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
MsgMaterial.condition.curr = obj.curr;
console.log(obj.limit); //得到每页显示的条数
MsgMaterial.condition.limit = obj.limit;
//首次不执行
if(!first){
//do something
MsgMaterial.initGrid_getData(obj.curr,obj.limit,false);//调用
}
}
});
}
//{"code":0,"count":10,"data":[{"createTime":"2021-03-18 09:55:40","createUser":1,"id":1097,"title":"亲，有什么可以帮你的？","type":"1","userName":"--","content":"亲，有什么可以帮你的？ 这里提供不同类型的产品供你选择"},{"createTime":"2021-03-18 09:55:56","createUser":1,"id":1098,"title":"电话运销是","type":"1","userName":"--","content":"电话运销是，************888"},{"createTime":"2021-03-18 09:56:08","createUser":1,"id":1099,"title":"客官，有何需求","type":"1","userName":"--","content":"客官，有何需求：本店提供各类服务新茶、红茶"},{"createTime":"2021-03-18 09:57:09","createUser":1,"id":1100,"title":"一周热门banner","type":"2","userName":"--","content":"http://qny-mpkj.51wxfd.club/1616032614390.jpeg"},{"coverPicture":"http://qny-mpkj.51wxfd.club/1616034421160.jpeg","createTime":"2021-03-18 10:27:15","linkAddress":"https://www.jianshu.com/nb/22645321","createUser":1,"id":1104,"title":"技术笔记","type":"3","userName":"--","content":"技术笔记-简书"},{"createTime":"2021-03-18 10:27:43","createUser":1,"id":1105,"title":"技术笔记","type":"2","userName":"--","content":"http://qny-mpkj.51wxfd.club/1616034454187.jpeg"},{"coverPicture":"http://qny-mpkj.51wxfd.club/1616036826338.jpeg","createTime":"2021-03-18 11:07:22","createUser":1,"id":1106,"title":"微信奇怪菜单","type":"4","userName":"--","content":"http://qny-mpkj.51wxfd.club/1615885633066.mp4"},{"coverPicture":"http://qny-mpkj.51wxfd.club/1616052268557.jpeg","createTime":"2021-03-18 15:24:34","routineName":"美团","routineIcon":"http://qny-mpkj.51wxfd.club/1616052256906.jpeg","createUser":1,"id":1109,"routineAppId":"美团_appid","title":"水煮牛佬","type":"5","routineOriginId":"美团_orginalId","userName":"--","routinePath":"https://www.meituan.com/"},{"coverPicture":"http://qny-mpkj.51wxfd.club/1616052373749.jpeg","createTime":"2021-03-18 15:26:19","routineName":"我的冒险世界","routineIcon":"http://qny-mpkj.51wxfd.club/1616052362502.jpeg","createUser":1,"id":1110,"routineAppId":"wxc17d01d457df779","title":"新春快乐！","type":"5","routineOriginId":"gh_f578b109379b@app","userName":"--","routinePath":"https://glog.aldwx.com"},{"fileName":"安卓逆向大纲 & #40;1& #41;.pdf","createTime":"2021-03-18 16:59:02","createUser":1,"id":1111,"title":"安卓逆向大纲 & #40;1& #41;.pdf","type":"6","userName":"--","content":"http://qny-mpkj.51wxfd.club/1616057930913.pdf"}],"msg":"请求成功"}
$("#div_materialGrid").empty();
if (1==1){//用于控制测试代码走向
for(mIndex in data.data){
var newInput = "";
var curDataType = data.data[mIndex].type;
if (curDataType =='1' ){
newInput = MsgMaterial.renderGridTxt_newInput(data.data[mIndex]);
}else if (curDataType =='2' ){
newInput = MsgMaterial.renderGridImgTxt_newInput(data.data[mIndex]);
}else if (curDataType =='3' ){
newInput = MsgMaterial.renderGridLink_newInput(data.data[mIndex]);
}else if (curDataType =='4' ){
newInput = MsgMaterial.renderGridVedio_newInput(data.data[mIndex]);
}else if (curDataType =='5' ){
newInput = MsgMaterial.renderGridSmallApp_newInput(data.data[mIndex]);
}else if (curDataType =='6' ){
newInput = MsgMaterial.renderGridFile_newInput(data.data[mIndex]);
}else{
console.log("未知类型素材库无法渲染！");
}
($("#div_materialGrid").append(newInput))
}
}else {//调试用的代码
if( $("#type").val() =='1'){
//Feng.success("需要渲染文字素材！");
MsgMaterial.renderGridTxt(data.data);
}else if( $("#type").val() =='2'){
//Feng.success("需要渲染图片文字素材！");
MsgMaterial.renderGridImgTxt(data.data)
}else if( $("#type").val() =='3'){
//Feng.success("需要渲染link连接素材！");
MsgMaterial.renderGridLink(data.data)
}else if( $("#type").val() =='4'){
//Feng.success("需要渲染视频素材！");
MsgMaterial.renderGridVedio(data.data)
}else if( $("#type").val() =='5'){
//Feng.success("需要渲染小程序素材！");
MsgMaterial.renderGridSmallApp(data.data)
}else if( $("#type").val() =='6'){
//Feng.success("需要渲染文件素材！");
MsgMaterial.renderGridFile(data.data)
}else{
Feng.error("未知类型素材库无法渲染！");
}
}
console.log(data);
}, function (data) {
Feng.error("获取素材库失败！" + data.responseJSON.message)
});
ajax.set("deptId", MsgMaterial.condition.deptId);
ajax.set("beginTime", $("#beginTime").val());
ajax.set("endTime", $("#endTime").val());
ajax.set("type", $("#type").val());
ajax.set("argPage", page);
ajax.set("arglimit", argLimit);
ajax.start();
};
MsgMaterial.renderGridTxt= function (data){
for (mIndex in data){
//var newInput2 = MsgMaterial.renderGridTxt_newInput(data[mIndex]);
var newInput = MsgMaterial.renderGridTxt_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridTxt_newInput= function (data){
var newInput = ' <div class="layui-col-md4 " style="height: 272px;">\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t<div class="layui-bg-cyan">\n' +
//'\t\t\t\t\t 1/3-3 (txt) LayIM 前端文档\n' +
data.title+
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div >\n' +
//'\t\t\t\t\t LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，采用 HTML、CSS、JavaScript 编写，其包含的只是一套前端源代码素材和相关的模拟示例，不具备后台程序以数据库存储等功能。因此实际使用时，需要自己开发后端语言或对接云服务平台（如：融云、环信等）。\n' +
data.content+
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom" >\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4;">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t</div>\n' +
' </div>';
return newInput;
}
MsgMaterial.renderGridImgTxt= function (data){
for (mIndex in data){
var newInput = MsgMaterial.renderGridImgTxt_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridImgTxt_newInput= function (data){
var newInput = '<div class="layui-col-md3 " style="height: 272px;" >\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t<div class="layui-bg-cyan ">\n' +
//'\t\t\t\t\t 1/3-1(img+txt图文)除了H&M，阿迪、耐克、优衣库、无印良品等大牌也抵制新疆棉花\n' +
data.title+
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div >\n' +
//'\t\t\t\t\t <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="200" height="200">\n' +
'\t\t\t\t\t <img src="'+data.content+'" alt="" width="200" height="200">\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom">\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t</div> \n' +
' </div>';
return newInput;
}
MsgMaterial.renderGridLink= function (data){
for (mIndex in data){
var newInput = MsgMaterial.renderGridLink_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridLink_newInput= function (data){
var newInput = '<div class="layui-col-md4" style="height: 272px;">\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t<div class="layui-bg-blue">\n' +
//'\t\t\t\t\t <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(link)微信逆向之---给微信朋友圈添加控件——笔记</a>\n' +
'\t\t\t\t\t <a href="'+data.linkAddress+'" target="_blank">'+data.title+'</a>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 ">\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
//'\t\t\t\t\t desc牵手生活--今日头条号 微信逆向之---给微信朋友圈添加控件——笔记\n' +
data.content+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
//'\t\t\t\t\t <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">\n' +
'\t\t\t\t\t <img src="'+data.coverPicture+'" alt="" width="200" height="200">\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom">\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t</div>\n' +
' \n' +
' </div>';
return newInput;
}
MsgMaterial.renderGridVedio= function (data){
for (mIndex in data){
var newInput = MsgMaterial.renderGridVedio_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridVedio_newInput= function (data){
var newInput = '<div class="layui-col-md4 " style="height: 272px;">\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t<div class="layui-bg-orange">\n' +
//'\t\t\t\t\t 1/3-3 (vedio)视频描述-微信奇怪菜单\n' +
data.title+
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div >\n' +
//'\t\t\t\t\t <video id="video" width="200" height="100" src="http://qny-mpkj.51wxfd.club/1615885633066.mp4" controls autoplay>\n' +
'\t\t\t\t\t <video id="video" width="200" height="100" src="'+data.content+'" controls autoplay>\n' +
'\t\t\t\t\t </video>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom layui-">\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t</div>\n' +
' \n' +
' </div>';
return newInput;
}
MsgMaterial.renderGridSmallApp= function (data){
for (mIndex in data){
var newInput = MsgMaterial.renderGridSmallApp_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridSmallApp_newInput= function (data){
var newInput = '<div class="layui-col-md4" style="height: 272px;">\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-bg-blue">\n' +
//'\t\t\t\t\t <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(smallApp)李宁羽毛球-ff3306系列</a>\n' +
'\t\t\t\t\t <a href="'+data.routinePath+'" target="_blank">'+data.title+'</a>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 ">\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
//'\t\t\t\t\t 冒险世界商城\n' +
data.routineName+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
//'\t\t\t\t\t <img src="http://qny-mpkj.51wxfd.club/1617000783974.jpeg" alt="" width="200" height="200">\n' +
'\t\t\t\t\t <img src="'+data.coverPicture+'" alt="" width="200" height="200">\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom">\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t</div>\n' +
' </div>';
return newInput;
}
MsgMaterial.renderGridFile= function (data){
for (mIndex in data){
var newInput = MsgMaterial.renderGridFile_newInput(data[mIndex]);
($("#div_materialGrid").append(newInput))
}
}
MsgMaterial.renderGridFile_newInput= function (data){
var newInput = '<div class="layui-col-md4 " style="height: 272px;">\n' +
'\t\t\t\t<div class="layui-bg-red">\n' +
'\t\t\t\t\t<div class="layui-bg-blue">\n' +
//'\t\t\t\t\t <a href="https://www.toutiao.com/i6493364451759096334/" target="_blank">(file)Visual C#从入门到精通 第九版.docx</a>\n' +
'\t\t\t\t\t <a href="'+data.content+'" target="_blank">'+data.title+'</a>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 ">\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn icon-btn layui-btn-normal " href="https://jjc.qiniu.maijiacloud.cn/ae7b3b45792d4b63a56f59a9db3697eb" >下载</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <img src="http://qny-mpkj.51wxfd.club/1617000932794.jpeg" alt="" width="50" height="50">\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t\t<div class="layui-row layui-col-space1 layui-edge-bottom ">\n' +
'\t\t\t\t\t <div class="layui-col-md4">\n' +
//'\t\t\t\t\t 2021-03-17 14:51:23\n' +
data.createTime+
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2 " style="border-color: #00a2d4">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-normal layui-btn-xs" >修改</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t <div class="layui-col-md2">\n' +
'\t\t\t\t\t <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>\n' +
'\t\t\t\t\t </div>\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t</div>\n' +
'\t\t\t\t</div>\n' +
' </div>';
return newInput;
}
MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,true);//调用
//渲染时间选择框
laydate.render({
elem: '#beginTime'
});
// 搜索按钮点击事件
$('#btnSearch').click(function () {
MsgMaterial.search();
});
// 添加按钮点击事件
$('#btnAdd_txt').click(function () {
MsgMaterial.addMaterial_txt();
});
/**
* 弹出添加
*/
MsgMaterial.addMaterial_txt = function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--文字',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=1',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
};
// 添加按钮点击事件
$('#btnAdd_img').click(function () {
MsgMaterial.addMaterial_img();
});
/**
* 弹出添加
*/
MsgMaterial.addMaterial_img = function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--图片',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=2',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
};
$('#btnAdd_link').click(function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--图片链接',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=3',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
});
$('#btnAdd_video').click(function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--视频',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=4',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
});
$('#btnAdd_smallApp').click(function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--小程序素材',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=5',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
});
$('#btnAdd_file').click(function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加素材--小程序素材',
//content: Feng.ctxPath + '/deviceInfo/deviceInfo_add',
content: Feng.ctxPath + '/material/material_add?type=6',
end: function () {
admin.getTempData('formOk') && MsgMaterial.initGrid_getData(1,MsgMaterial.condition.limit,false);//调用;
}
});
});
/**
* 左侧树加载
*/
MsgMaterial.loadDeptTree = function () {
var ajax = new $ax(Feng.ctxPath + "/dept/layuiTree", function (data) {
tree.render({
elem: '#deptTree',
data: data,
//click:MsgMaterial.onClickDept
click: function(obj){
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.state); //得到当前节点的展开状态：open、close、normal
console.log(obj.elem); //得到当前节点元素
console.log(obj.data.children); //当前节点下是否有子节点
MsgMaterial.condition.deptId = obj.data.id;
MsgMaterial.search();
}
});
}, function (data) {
});
ajax.start();
};
//初始化左侧部门树
MsgMaterial.loadDeptTree();
/**
* 选择部门时
*/
MsgMaterial.onClickDept = function (obj) {
MsgMaterial.condition.deptId = obj.data.id;
MsgMaterial.search();
};
});
