精华内容
下载资源
问答
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼JavaWeb使用layui实现分页【1】视图层播放删除var tabMusicInfor;//音乐信息表var i=0;var layer, table;//1-页面数据加载$(function () {//【1】加载&初始化layui...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

    JavaWeb使用layui实现分页

    【1】视图层

    播放

    删除

    var tabMusicInfor;//音乐信息表

    var i=0;

    var layer, table;

    //1-页面数据加载

    $(function () {

    //【1】加载&初始化layui模块

    layui.use(["layer", "table"], function() {

    table = layui.table;//【2】获取layui的table模块的属性

    layer = layui.layer;//弹出层

    //加载table模块数据

    layuiTable();

    });

    });

    //【2】加载table模块数据

    function layuiTable(){

    tabMusicInfor = table.render({

    //【1】指定table的容器选择器或 DOM

    elem: "#tabMusicInfor",

    //【2】指定加载数据的路径

    // url:"${ctx}/web/MyMusicServlet?method=musicList",

    //【3】控制整个table元素的宽

    width : 1500,

    //【4】设置表头。值是一个二维数组

    cols: [[

    { type: "checkbox", fixed :"left",width:"10%"},

    { type: "numbers", title: "序号",width:"10%"},

    { field: "music", title: "音乐名" ,width:"30%"},

    { field: "songer", title: "歌手" ,width:"30%"},

    { fixed :"right",title:"操作", toolbar: "#barDemo",align:"center"},

    ]],

    //【5】开启分页,limit设置当前页面显示的记录值

    page: {

    limits : [10, 15,20,30,50 ]

    ,limit : 10

    },

    //【6】用于对分页请求(将分页重新向服务器请求数据)

    request: {

    pageName: "currentPage",

    limitName: "rows",

    },

    //【7】存储当前页的列表数据

    data: [],

    });

    //【8】音乐列表数据重载

    searchTabMusic();

    //【9】监听工具条事件

    layuiTabletool();

    }

    //2-1触发音乐列表数据重载

    function searchTabMusic(){

    tabMusicInfor.reload({

    url:"${ctx}/web/MyMusicServlet" , //【2】请求路径

    where:{"method":"musicList"},

    });

    }

    //2-2加载监听工具条

    function layuiTabletool(){

    table.on('tool(tabMusicInfor)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性lay-filter="对应的值"

    var layEvent=obj.event;//获取该操作按钮的lay-event事件

    var ID=obj.tr.selector;//获取点击该按钮的class

    var data=obj.data;

    var music=document.getElementById("music");//获取音乐容器的属性

    console.log(this); //当前排序的 th 对象

    if(layEvent === 'play'){ //播放音乐操作

    i++;//记录点击次数

    var text= $(""+ID).find("a").eq(0).text();

    if(text=="播放"){

    $(""+ID).find("a").eq(0).text("停止");

    //记录点击操作按钮

    onLayEventSession(ID,i);

    //切歌曲

    music.src="${ctx}/MyMusic/"+data.songer+"-"+data.music+".mp3";

    }else{

    $(""+ID).find("a").eq(0).text("播放");

    music.src="";

    }

    } else if(layEvent === 'del'){ //删除

    delEvent("${ctx}/web/MyMusicServlet",{"method":"delMusic","music":data.music,"songer":data.songer});

    }

    });

    }

    //2-3触发记录点击操作按钮事件

    function onLayEventSession(ID,i){

    //sessionStorage的存活周期在浏览器关闭周期或者刷新

    // 保存数据到sessionStorage

    sessionStorage.setItem('ID'+i, ID);

    //从sessionStorage获取点击操作按钮的class

    var newID = sessionStorage.getItem('ID'+i);

    //从sessionStorage获取上一次点击操作按钮的class

    var oldID=sessionStorage.getItem('ID'+(i-1));

    var newIDtext= $(""+newID).find("a").eq(0).text();

    var oldIDtext= $(""+oldID).find("a").eq(0).text();

    //判断点击前一次与后一次的按钮是否一样

    if(oldID!=null||oldID!=""){

    if(oldID!=newID){

    if(oldIDtext=="停止"){

    $(""+oldID).find("a").eq(0).text("播放");

    }

    }

    }

    }

    【2】控制器

    //读取音乐文件

    @SuppressWarnings("static-access")

    publicvoid musicList(HttpServletRequest request,HttpServletResponseresponse)

    throws ServletException, IOException {

    //【1】设置编码

    request.setCharacterEncoding("utf-8");

    response.setCharacterEncoding("utf-8");

    response.setContentType("text/html;charset=UTF-8");//处理响应编码

    //【2】读取文件夹

    Filemusic=new File(this.getServletContext().getRealPath("/MyMusic"));

    List listMusicInfor=newArrayList();

    ListMusicInfor list=null;

    String[] strArr={};

    //判断该文件是否存在

    if(music.exists()){

    //判断该文件是否是一个文件夹

    if(music.isDirectory()) {

    //读取该文件夹里面的所有文件

    String[] strLists=music.list();

    //遍历文件数组

    for (String strList : strLists) {

    //读取该文件夹里面的文件

    File sing=newFile(music.getAbsolutePath()+"/"+strList);

    if(!sing.isDirectory()) {

    //通过截取判断文件的后缀名

    StringfileName=sing.getName();

    //注意使用split("\\.")而不是split(".")

    //substring(截取开始的位置,截取结束的位置)

    String fileTyle=fileName.substring(fileName.lastIndexOf("."),fileName.length());

    if(fileTyle.equals(".mp3")){

    //[0]林宥嘉-全世界谁倾听你 [1]mp3

    strArr= fileName.split("\\.");

    if(strArr[0].contains("-")){

    strArr=strArr[0].split("-");

    }elseif(strArr[0].contains("_")){

    strArr=strArr[0].split("_");

    }

    list=new ListMusicInfor();

    list.setSonger(strArr[0]);

    list.setMusic(strArr[1]);

    listMusicInfor.add(list);

    }

    }

    }

    StringcurrentPage=request.getParameter("currentPage");

    String rows=request.getParameter("rows");

    PageUtil page=findByPage(listMusicInfor,currentPage,rows);

    LayuiUtil layuiUtil = newLayuiUtil(listMusicInfor.size(), page.getList());

    PrintWriter out =response.getWriter();

    out.write(layuiUtil.toJson(listMusicInfor.size(),page.getList()));

    out.flush();

    out.close();

    }

    }

    }

    publicPageUtil findByPage(Listlist,String currentPage,String rows){

    //【1】创建分页对象

    PageUtil page=new PageUtil();

    //【2】添加当前页

    page.setCurrentPage(currentPage);

    //【3】每页显示条数

    page.setRows(rows);

    //【4】总记录数

    int totalCount=list.size();

    page.setTotalCount(totalCount);

    //【5】列表数据

    //计算开始的记录索引

    ArrayList newlist=newArrayList();

    int start=(page.getCurrentPage()-1)*page.getRows();

    int end=start+page.getRows();

    //取出所需的数据--列表数据

    for (int i = start; i < end; i++) {

    if(i

    newlist.add(list.get(i));

    }

    }

    page.setList(newlist);

    //【6】计算总页码

    try {

    inttotalPage=(totalCount%page.getRows())==0?totalCount/page.getRows():(totalCount/page.getRows()+1);

    page.setTotalPage(totalPage);

    } catch (ArithmeticException e) {

    //TODO: handle exception

    }

    return page;

    }

    【3】总结分析

    1)首先做好准备工作layui的table组件默认规定的数据格式

    {

    “code”:0;

    “msg”:””;

    “count”:list.size();

    “data”:list数组;

    }

    2)根据上方的数据格式封装一个layui的table组件接收数据的工具类

    publicclass LayuiUtil {

    //反正我是忽略code和msg,如果非要封装那就自己自定义

    // private int code;

    // private String msg;

    privateintcount;

    private List data;

    public LayuiUtil(int count,List data) {

    // this.code=code;

    // this.msg=msg;

    this.count=count;

    this.data=data;

    }

    //注意转换为json数据交互

    public String toJson() {

    String json=ToJsonUtil.toJson(count,data);

    return json;

    }

    publicstatic String toJson(int count, List data){

    LayuiUtil layuiUtil = new LayuiUtil(count, data);

    return layuiUtil.toJson();

    }

    }

    3)我引用了json-lib-2.4-jdk15.jar封装了一个转换数据为json格式的工具类ToJsonUtil

    //传递layui表格数据json格式化

    //在这里要加code和msg

    publicstatic String toJson(int count,List> data){

    JSONObject jsonObj=new JSONObject();

    jsonObj.put("data", data);

    jsonObj.put("count", count);

    jsonObj.put("msg", "");

    jsonObj.put("code", 0);

    return jsonObj.toString();

    }

    4)最后是封装分页工具类,当然这个也可以不封装,反正我封装好了,你们自己写吧

    5)需要从页面获取

    request:{pageName: "currentPage"//当前页码

    ,limitName: "rows",//每页显示条数

    },//通过算法达到分页动态显示数据的效果

    d6a17be58292b9cb8b0dece3bc7ec5d4.png

    展开全文
  • https://www.cnblogs.com/yadongliang/p/11059108.html https://blog.csdn.net/sdiudui/article/details/80424539
    展开全文
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼JavaWeb使用layui实现分页【1】视图层播放删除var tabMusicInfor;//音乐信息表var i=0;var layer, table;//1-页面数据加载$(function () {//【1】加载&初始化layui...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

    JavaWeb使用layui实现分页

    【1】视图层

    播放

    删除

    var tabMusicInfor;//音乐信息表

    var i=0;

    var layer, table;

    //1-页面数据加载

    $(function () {

    //【1】加载&初始化layui模块

    layui.use(["layer", "table"], function() {

    table = layui.table;//【2】获取layui的table模块的属性

    layer = layui.layer;//弹出层

    //加载table模块数据

    layuiTable();

    });

    });

    //【2】加载table模块数据

    function layuiTable(){

    tabMusicInfor = table.render({

    //【1】指定table的容器选择器或 DOM

    elem: "#tabMusicInfor",

    //【2】指定加载数据的路径

    // url:"${ctx}/web/MyMusicServlet?method=musicList",

    //【3】控制整个table元素的宽

    width : 1500,

    //【4】设置表头。值是一个二维数组

    cols: [[

    { type: "checkbox", fixed :"left",width:"10%"},

    { type: "numbers", title: "序号",width:"10%"},

    { field: "music", title: "音乐名" ,width:"30%"},

    { field: "songer", title: "歌手" ,width:"30%"},

    { fixed :"right",title:"操作", toolbar: "#barDemo",align:"center"},

    ]],

    //【5】开启分页,limit设置当前页面显示的记录值

    page: {

    limits : [10, 15,20,30,50 ]

    ,limit : 10

    },

    //【6】用于对分页请求(将分页重新向服务器请求数据)

    request: {

    pageName: "currentPage",

    limitName: "rows",

    },

    //【7】存储当前页的列表数据

    data: [],

    });

    //【8】音乐列表数据重载

    searchTabMusic();

    //【9】监听工具条事件

    layuiTabletool();

    }

    //2-1触发音乐列表数据重载

    function searchTabMusic(){

    tabMusicInfor.reload({

    url:"${ctx}/web/MyMusicServlet" , //【2】请求路径

    where:{"method":"musicList"},

    });

    }

    //2-2加载监听工具条

    function layuiTabletool(){

    table.on('tool(tabMusicInfor)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性lay-filter="对应的值"

    var layEvent=obj.event;//获取该操作按钮的lay-event事件

    var ID=obj.tr.selector;//获取点击该按钮的class

    var data=obj.data;

    var music=document.getElementById("music");//获取音乐容器的属性

    console.log(this); //当前排序的 th 对象

    if(layEvent === 'play'){ //播放音乐操作

    i++;//记录点击次数

    var text= $(""+ID).find("a").eq(0).text();

    if(text=="播放"){

    $(""+ID).find("a").eq(0).text("停止");

    //记录点击操作按钮

    onLayEventSession(ID,i);

    //切歌曲

    music.src="${ctx}/MyMusic/"+data.songer+"-"+data.music+".mp3";

    }else{

    $(""+ID).find("a").eq(0).text("播放");

    music.src="";

    }

    } else if(layEvent === 'del'){ //删除

    delEvent("${ctx}/web/MyMusicServlet",{"method":"delMusic","music":data.music,"songer":data.songer});

    }

    });

    }

    //2-3触发记录点击操作按钮事件

    function onLayEventSession(ID,i){

    //sessionStorage的存活周期在浏览器关闭周期或者刷新

    // 保存数据到sessionStorage

    sessionStorage.setItem('ID'+i, ID);

    //从sessionStorage获取点击操作按钮的class

    var newID = sessionStorage.getItem('ID'+i);

    //从sessionStorage获取上一次点击操作按钮的class

    var oldID=sessionStorage.getItem('ID'+(i-1));

    var newIDtext= $(""+newID).find("a").eq(0).text();

    var oldIDtext= $(""+oldID).find("a").eq(0).text();

    //判断点击前一次与后一次的按钮是否一样

    if(oldID!=null||oldID!=""){

    if(oldID!=newID){

    if(oldIDtext=="停止"){

    $(""+oldID).find("a").eq(0).text("播放");

    }

    }

    }

    }

    【2】控制器

    //读取音乐文件

    @SuppressWarnings("static-access")

    publicvoid musicList(HttpServletRequest request,HttpServletResponseresponse)

    throws ServletException, IOException {

    //【1】设置编码

    request.setCharacterEncoding("utf-8");

    response.setCharacterEncoding("utf-8");

    response.setContentType("text/html;charset=UTF-8");//处理响应编码

    //【2】读取文件夹

    Filemusic=new File(this.getServletContext().getRealPath("/MyMusic"));

    List listMusicInfor=newArrayList();

    ListMusicInfor list=null;

    String[] strArr={};

    //判断该文件是否存在

    if(music.exists()){

    //判断该文件是否是一个文件夹

    if(music.isDirectory()) {

    //读取该文件夹里面的所有文件

    String[] strLists=music.list();

    //遍历文件数组

    for (String strList : strLists) {

    //读取该文件夹里面的文件

    File sing=newFile(music.getAbsolutePath()+"/"+strList);

    if(!sing.isDirectory()) {

    //通过截取判断文件的后缀名

    StringfileName=sing.getName();

    //注意使用split("\\.")而不是split(".")

    //substring(截取开始的位置,截取结束的位置)

    String fileTyle=fileName.substring(fileName.lastIndexOf("."),fileName.length());

    if(fileTyle.equals(".mp3")){

    //[0]林宥嘉-全世界谁倾听你 [1]mp3

    strArr= fileName.split("\\.");

    if(strArr[0].contains("-")){

    strArr=strArr[0].split("-");

    }elseif(strArr[0].contains("_")){

    strArr=strArr[0].split("_");

    }

    list=new ListMusicInfor();

    list.setSonger(strArr[0]);

    list.setMusic(strArr[1]);

    listMusicInfor.add(list);

    }

    }

    }

    StringcurrentPage=request.getParameter("currentPage");

    String rows=request.getParameter("rows");

    PageUtil page=findByPage(listMusicInfor,currentPage,rows);

    LayuiUtil layuiUtil = newLayuiUtil(listMusicInfor.size(), page.getList());

    PrintWriter out =response.getWriter();

    out.write(layuiUtil.toJson(listMusicInfor.size(),page.getList()));

    out.flush();

    out.close();

    }

    }

    }

    publicPageUtil findByPage(Listlist,String currentPage,String rows){

    //【1】创建分页对象

    PageUtil page=new PageUtil();

    //【2】添加当前页

    page.setCurrentPage(currentPage);

    //【3】每页显示条数

    page.setRows(rows);

    //【4】总记录数

    int totalCount=list.size();

    page.setTotalCount(totalCount);

    //【5】列表数据

    //计算开始的记录索引

    ArrayList newlist=newArrayList();

    int start=(page.getCurrentPage()-1)*page.getRows();

    int end=start+page.getRows();

    //取出所需的数据--列表数据

    for (int i = start; i < end; i++) {

    if(i

    newlist.add(list.get(i));

    }

    }

    page.setList(newlist);

    //【6】计算总页码

    try {

    inttotalPage=(totalCount%page.getRows())==0?totalCount/page.getRows():(totalCount/page.getRows()+1);

    page.setTotalPage(totalPage);

    } catch (ArithmeticException e) {

    //TODO: handle exception

    }

    return page;

    }

    【3】总结分析

    1)首先做好准备工作layui的table组件默认规定的数据格式

    {

    “code”:0;

    “msg”:””;

    “count”:list.size();

    “data”:list数组;

    }

    2)根据上方的数据格式封装一个layui的table组件接收数据的工具类

    publicclass LayuiUtil {

    //反正我是忽略code和msg,如果非要封装那就自己自定义

    // private int code;

    // private String msg;

    privateintcount;

    private List data;

    public LayuiUtil(int count,List data) {

    // this.code=code;

    // this.msg=msg;

    this.count=count;

    this.data=data;

    }

    //注意转换为json数据交互

    public String toJson() {

    String json=ToJsonUtil.toJson(count,data);

    return json;

    }

    publicstatic String toJson(int count, List data){

    LayuiUtil layuiUtil = new LayuiUtil(count, data);

    return layuiUtil.toJson();

    }

    }

    3)我引用了json-lib-2.4-jdk15.jar封装了一个转换数据为json格式的工具类ToJsonUtil

    //传递layui表格数据json格式化

    //在这里要加code和msg

    publicstatic String toJson(int count,List> data){

    JSONObject jsonObj=new JSONObject();

    jsonObj.put("data", data);

    jsonObj.put("count", count);

    jsonObj.put("msg", "");

    jsonObj.put("code", 0);

    return jsonObj.toString();

    }

    4)最后是封装分页工具类,当然这个也可以不封装,反正我封装好了,你们自己写吧

    5)需要从页面获取

    request:{pageName: "currentPage"//当前页码

    ,limitName: "rows",//每页显示条数

    },//通过算法达到分页动态显示数据的效果

    d6a17be58292b9cb8b0dece3bc7ec5d4.png

    展开全文
  • layui实现分页查询

    千次阅读 2018-09-22 23:48:27
    1.下载layui https://www.layui.com/...2.查看文档 https://www.layui.com/doc/modules/laypage.html(分页) 3.实例展示 //核心配置 layui.config({ base : "js/" }).use(['form','layer','jquery','laypage...
    1.下载layui
    
    https://www.layui.com/(layui前端框架由贤心创作)
    
    2.查看文档
    
    https://www.layui.com/doc/modules/laypage.html(分页)
    
    3.实例展示
    
    //核心配置
    
    layui.config({
        base : "js/"
    }).use(['form','layer','jquery','laypage'],function(){
        var form = layui.form(),
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
    
    //加载页面数据
        var noticeData = '';
        $.ajax({
            url:'/notice/select',
            type:'post',
            dataType:'json',    
            contenType : 'application/json', 
            error: function(data){
                alert("失败!");
            },
            success: function(data){
                noticeData=data;
                noticeList();
            }
           });
    
    function noticeList(that){
            //渲染数据
            function renderDate(data,curr){
                var dataHtml = '';
                if(!that){
                    currData = noticeData.concat().splice(curr*nums-nums, nums);
                }else{
                    currData = that.concat().splice(curr*nums-nums, nums);
                }
                if(currData.length != 0){
                    for(var i=0;i<currData.length;i++){
                        dataHtml +='<tr>';
                        dataHtml +='<td>'+currData[i].notice_id+'</td>';
                        dataHtml +='<td>'+currData[i].title+'</td>';
                        dataHtml +='<td>'+currData[i].user_id+'</td>';
                        dataHtml +='<td>'+timeStamp2String(currData[i].turnover_time)+'</td>';
                        dataHtml +='<td>'+currData[i].clicks+'</td>';
                        dataHtml +='<td>'+currData[i].classify+'</td>';
                        dataHtml +='<td>'+currData[i].prospectus+'</td>';
                        dataHtml +='<td>'+currData[i].photo+'</td>';
              dataHtml +='<td>'+'<a href="noticeEdit.html?notice_id='+currData[i].notice_id+'"><button type="button"><i class="iconfont icon-edit"></i>编辑</button></a>'
                        +'<button type="button" onclick="deletey5555('+currData[i].notice_id+')" style="background-color:yellow;">删除<i class="layui-icon">&#xe640;</i></button>'+'</td>';
                        dataHtml +='</tr>';
                    }
                }
                return dataHtml;
            }
    
            //分页
            var nums = 2; //每页出现的数据量
            if(that){
                noticeData = that;
            }
            laypage({
                cont : "page",
                pages : Math.ceil(noticeData.length/nums),
                jump : function(obj){
                    $(".thead").html(renderDate(noticeData,obj.curr));
                    $('.notice_list thead input[type="checkbox"]').prop("checked",false);
                    form.render();
                }
            })
        }

    分页效果图

    4.layui分页使用总结

    通过核心参数laypage.render(options)来设置分页参数

     

    展开全文
  • 点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。 官方开发文档里photos支持传入json和直接读取页面图片两种方式。 下面是官方开发文档的截图,官方开发文档链接:...
  • layui实现下拉框select多选,取值

    万次阅读 2019-07-23 15:19:18
    layui实现下拉框select多选,取值 html form.on('select(multi)', function (data) { // 打开控制台查看效果 onsole.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值...
  • 1、layui的分页,本来准备用table+laypage,尝试失败,后面我还会继续尝试。这里我主要用方法级渲染的方式,代码如下:查看编辑删除table.render({elem: '#userTable' //指定原始表格元素选择器(推荐id选择器),...
  • layui实现同页面显示多种时间样式代码如下:layui在线调试body{margin: 10px;}.demo-carousel{height: 200px; line-height: 200px; text-align: center;}查看编辑删除演示说明日期分页上传滑块在这里,你将以最直观...
  • SSM+Layui实现批量导入数据功能

    千次阅读 多人点赞 2019-05-04 16:26:28
    SSM+Layui实现批量导入数据功能 最近要实现批量导入功能,查看了相关资料,以及百度了相关内容,发现有点不是很全,特别是引入的依赖不全 话不多说,直接上代码开始: 1、pom.xml文件引入相关依赖 <!--文件上传...
  • "查看代码" 。这就是layui内置的分页代码,复制到编辑器即可;3.注意红色框中的两个引入文件的地址,(如果没有layui文件,可以去官网下载)4.修改上图黄色框中的内容,意思分别是elem:展示数据的table表格,u...
  • "查看代码" 。这就是layui内置的分页代码,复制到编辑器即可; 3.注意红色框中的两个引入文件的地址,(如果没有layui文件,可以去官网下载) 4.修改上图黄色框中的内容,意思分别是elem:展示数据的table表...
  • layui是一个前端 UI 框架,内置了js代码,所以我们可以直接使用内置的分页 ... "查看代码" 。这就是layui内置的分页代码,复制到编辑器即可; 3.注意红色框中的两个引入文件的地址,(如果没...
  • layui实现根据table数据判断按钮显示情况

    万次阅读 热门讨论 2018-11-20 08:33:31
    就可以根据table的数据实现判断toolbar按钮的显示状态和情况 &lt;script type="text/html" id="barDemo"&gt; {{# if(d.status ==0){ }} &lt;a class="layui-btn layui-btn...
  • springboot2+mybatis+shiro+layui实现的接口级 权限管理系统 中小型项目开发脚手架 持续更新中 业余时间做着玩,想到什么加什么 有什么想法可以一起讨论 就不截图了 可以直接访问查看 访问地址:...
  • layui在兼容分辨率上感觉挺不错,今天主要介绍layui的layer弹出层模块的相册层 layer.photos,功能需求页面展示图片的缩略图,当点击图片是需要展示查看大图效果,layer的相册层正好实现了这一功能。 首先需要引入...
  • 目录前期提要撸起来前台代码后台代码Bas_DictDao.javaBas_...项目中导入layui 点击下载即可 以及完成下拉框动态加载点击查看 撸起来 前台代码 $.ajax({ url: '${pageContext.request.contextPath}/sy/bas_dict_...
  • 写个文档方便随时查看 后端代码实现 controller /* * @return */ @ResponseBody @RequestMapping(value = "/list", method = RequestMethod.GET) public HashMap<String,Object> list(int page, int...
  • 使用layui实现异步请求后台分页操作,用到table和laypage两个模块,详细资料见官网。直接贴代码,看起来比较简单,初次使用还是要费点心思的HTML查看JavaScriptlayui.extend({request: "{/}/static/js/control/layui...
  • 项目用LayUI进行开发,需求方提出一个范围权限控制的实现方案。在复选框只能单选的前提下,管理员可以取消勾选,查看所有数据,但普通用户由于权限限制,不可以取消勾选。 在查找资料的过程中,发现jq的常用操作...
  • 先看效果,初次渲染以及点击查看详情
  • 前端页面的关键代码,基于html5序号应用ID服务ID设备ID网关ID数据时间日期数据操作查看编辑删除layui.use(['form','layer','layedit','laydate','upload','table'],function(){var form = layui.form;layer = paren....
  • 查看原图 <table id="dutyInfoTable" class="layui-hide"></table> js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', width: 50 }, {...
  • 查看原图js//定义列var cols = [[{type: 'radio',width: 60}, {type: 'numbers',width: 50}, {field: 'org_id',title: '所属单位',align: 'center',templet: function(d) {return LocalData.getOrg().name;...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容:编号autocomplete="off" class="layui-input"readonly="readonly">姓名autocomplete="off" class=...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 341
精华内容 136
关键字:

layui实现查看