精华内容
下载资源
问答
  • layui数据表格重载

    2021-01-13 10:01:36
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...--引入layui样式-->...link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/.

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入layui样式-->
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
    
        <script src="layui/lay/modules/jquery.js"></script>
        <script src="layui/jquery.js"></script>
      <script src="layui/layui.all.js"></script>
    </head>
    <script>
         $(function () {
    
             $("#cha").click(function () {
                var d11= $("#test1").val();
                 var d22= $("#test2").val();
    
                 if(d11=="" || d22==""){
                     layer.msg('请不要不选择!');
                 }
    // window.location.href="/designe/dyfPrescriptions/TDaoExcel?d1="+d11+"&d2="+d22
               $.ajax({
                   url:"/designe/dyfPrescriptions/TDaoExcel",
                   type:"GET",
                   data:{"d1":d1,"d2":d2},
                   async:false,
                   beforeSend:function () {
                       this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                   },
                   success:function(data){
                       console.log(data)
                       if(data.status == 'error'){
                           layer.msg(data.msg,{icon: 5});//失败的表情
                           o.removeClass('layui-btn-disabled');
                           return;
                       }else{
                           layer.msg(data.msg, {
                               icon: 6,//成功的表情
                               time: 1000 //1秒关闭(如果不配置,默认是3秒)
                           }, function(){
                               location.reload();
                           });
                       }
                   },
                   complete: function () {
                       layer.close(this.layerIndex);
                   },
    
    
               })
    
    
             })
    
    
    
    
         })
    </script>
    
    <body style="text-align: center;">
    <br/>
    <br/>
    <br/>
    
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
    </div>
        <!--<button class="layui-btn" data-type="reload">查询</button>-->
    <div class="layui-btn" data-type="reload"  lay-filter="rechar_btn" id="rechar_btn" >查询</div>
    
                   <!--<button class="layui-btn" onClick="location='/designe/dyfPrescriptions/DaoExcel';"><span></span>导成Excel</button>-->
    
    
    <table class="layui-hide" id="test" lay-filter="test">
    
    </table>
    
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            table.render({
                elem: '#test'
                ,url:'/designe/dyfPrescriptions/queryAll'
                ,method:"get"
                ,parseData:function (res) {
                    console.log(res);
                    return{
                        "code":0
                        ,"msg":""
                    ,"count":100
                        ,"data":res
                    }
    
                }
                ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                    ,{field:'createTime', title:'createTime', width:120, edit: 'text'}
                    ,{field:'isSuffering', title:'isSuffering', width:80, edit: 'text', sort: true}
                    ,{field:'amount', title:'amount', width:80, edit: 'text', sort: true}
                    ,{field:'sufferingNum', title:'sufferingNum', width:100}
                    ,{field:'companyNum', title:'companyNum'}
                    ,{field:'remark', title:'remark', width:80, sort: true}
    
                ]]
                ,page: true
            });
    
            //头工具栏事件
            table.on('toolbar(test)', 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 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });
    
            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.prompt({
                        formType: 2
                        ,value: data.email
                    }, function(value, index){
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });
    
    
    
            var $ = layui.$, active = {
                reload: function(){
                    var d11= $("#test1").val();
                    var d22= $("#test2").val();
                    alert(d11)
                    alert(d22)
    
    
                    //执行重载
                    table.reload('test', {
                        beforeSend:function () {
                            this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                        },
                        url:'/designe/dyfPrescriptions/TDaoExcel',
                        where:{
                            d1:d11,
                            d2:d22
                        }
                        ,
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
    
                    });
                }
            };
    
            $('#rechar_btn').on('click', function(){
                var type = $(this).data('type');
    
                if( $("#test1").val()=="" || $('#test2').val()==""){
                    layer.msg('查询条件不能为空');
                    return false;
                }
    
                active[type] ? active[type].call(this) : '';
            });
    
        });
    
    
    
    </script>
    
    </body>
    
    
    
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
    
            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
            });
            laydate.render({
                elem: '#test2', //指定元素
            });
        });
    </script>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    项目名加public下的页面名就能访问静态页面
    static下放静态页面资源
    template下放动态页面,动态页面需通过Controller访问

    展开全文
  • 今天小编就为大家分享一篇layui数据表格重载实现往后台传参,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 编程的过程就是一个不断发现问题,解决问题的过程,在用ssm框架和layui开发的过程中,在使用layui数据表格重载方法实现搜索功能中遇到问题,下面贴出我的解决方法。 一、dao层方法 //按username搜索 List<User&...

    编程的过程就是一个不断发现问题,解决问题的过程,在用ssm框架和layui开发的过程中,在使用layui数据表格重载方法实现搜索功能中遇到问题,下面贴出我的解决方法。

    一、dao层方法

        //按username搜索
        List<User> querySerchByusername(@Param("username") String username);
    

    二、dao层xml

        <!--按username模糊搜索-->
        <select id="querySerchByusername" resultType="User">
            select * from mycard.user
            <if test="username!=null and username != ''">
                where username like concat("%",#{username},"%")
            </if>
        </select>
    

    三、controller层

    LayuiTypeJson是自定义的工具类,第一篇文章里有,这里不再说明

    //所有用户搜索功能
        @RequestMapping("/alluserserch")
        public LayuiTypeJson<User> serch(@RequestParam(defaultValue = "") String username) {
            List<User> list = null;
            if (username.equals("")) {
                list = userservice.queryAllUser();
            }
            if (!username.equals("")) {
                list = userservice.querySerchByusername(username);
            }
            LayuiTypeJson<User> layuiTypeJson = new LayuiTypeJson<User>();
            layuiTypeJson.setCount(list.size());
            layuiTypeJson.setData(list);
            return layuiTypeJson;
        }
    

    四、前台页面

    注意:name属性需要和查询的字段名称保持一致

    <div class="demoTable" style="float:right">
                <div class="layui-inline">
                    <input class="layui-input" name="username" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    

    五、layui方法

    这里遇到的坑有几个:
    1、注意要给table一个id,用于重载,如:id: ‘testReload’。
    2、给后台传值的时候要把layui源码中的key去掉。

    <script>
        layui.use('table', function () {
            var table = layui.table
                , form = layui.form;
            table.render({
                elem: '#demo'
                , url: '/user/alluserserch'
                , cellMinWidth: 80
                , cols: [[
                    {type: 'numbers'}
                    , {type: 'checkbox'}
                    , {field: 'username', title: '用户名', width: 200, sort: true}
                    , {field: 'password', title: '密码'}
                    , {field: 'role', title: '角色'}
                    , {field: 'email', title: '邮箱'}
                    , {field: 'sex', title: '性别'}
                    , {field: 'age', title: '年龄'}
                    , {field: 'tel', title: '电话'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
    
                ]]
                , id: 'testReload'
                , page: true
            });
            var $ = layui.$, active = {
                reload: function () {
                    var username = $('#demoReload');
                    console.log(username.val());
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            username: username.val()
                        }
                    }, 'data');
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
    

    功能已经成功实现,有问题的小伙伴可以在评论区留言,大家一起探讨。

    展开全文
  • 匿名用户1级2017-10-13 回答在table标签的上方,加入这样一组html搜索商户: 搜索在js加入初始化代码和定义加载方法layui.use('table', function(){var table = layui.table;//方法级渲染table.render({elem: '#LAY_...

    匿名用户

    1级

    2017-10-13 回答

    在table标签的上方,加入这样一组html

    搜索商户:

    搜索

    在js加入初始化代码和定义加载方法

    layui.use('table', function(){

    var table = layui.table;

    //方法级渲染

    table.render({

    elem: '#LAY_table_user'

    ,url: 'UVServlet'

    ,cols: [[

    {checkbox: true, fixed: true}

    ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}

    ,{field:'aid', title: '商户', width:80, sort: true}

    ,{field:'uv', title: '访问量', width:80, sort: true,edit:true}

    ,{field:'date', title: '日期', width:180}

    ,{field:'datatype', title: '日期类型', width:100}

    ]]

    ,id: 'testReload'

    ,page: true

    ,height: 600

    });

    var $ = layui.$, active = {

    reload: function(){

    var demoReload = $('#demoReload');

    table.reload('testReload', {

    where: {

    keyword: demoReload.val()

    }

    });

    }

    };

    )};

    绑定click点击事件

    $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type');

    active[type] ? active[type].call(this) : '';

    });

    此时点击查询按钮,会将keyword这个关键字传到后端,接下来就是自己处理查询关键字业务了。

    到目前为止,搜索也有了,分页也有了,对了,分页会自动传到后端page,limit2个值到后台,相当于(pageindex,pagesize)

    展开全文
  • layui 的数据表格 列宽度自适应应该怎么设置...就好了呀,.net就不知道怎么写了layUI数据表格怎么绑定数据库?急接口写得清清啊,通过JS据渲染到表格上去,你写那个接口返回下面一样格式的json就可以了呀我用的是php...

    layui 的数据表格 列宽度自适应应该怎么设置

    接口写得清清啊,通过JS据渲染到表格上去,你写那个接口返回下面一样格式的json就可以了呀

    我用的是php 在处理完数据过后是一个数组,直接return json($arr);就好了呀,.net就不知道怎么写了

    layUI数据表格怎么绑定数据库?急

    接口写得清清啊,通过JS据渲染到表格上去,你写那个接口返回下面一样格式的json就可以了呀

    我用的是php 在处理完数据过后是一个数组,直接return json($arr);就好了呀,.net就不知道怎么写了

    layui数据表格重载怎么往后台传参?

    php 把数据导出到excel表多种方法,比用 phpExcel 等,以下代码是直接通过 header 生成 excel 文件码示例:

    header("Content-type:application/vnd.ms-excel");

    header("Content-Disposition:filename=xls_region.xls");

    $cfg_dbhost = 'localhost';

    $cfg_dbname = 'testdb';

    $cfg_dbuser = 'root';

    $cfg_dbpwd = 'root';

    $cfg_db_language = 'utf8';

    // END 配置

    //链接数据库

    $link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd);

    mysql_select_db($cfg_dbname);

    //选择编码

    mysql_query("set names ".$cfg_db_language);

    //users表

    $sql = "desc users";

    $res = mysql_query($sql);

    echo "";

    //导出表头(也就是表中拥有的字段)

    while($row = mysql_fetch_array($res)){

    $t_field[] = $row['Field']; //Field中的F要大写,否则没有结果

    echo "

    ".$row['Field']."

    ";

    }

    echo "";

    //导出100条数据

    $sql = "select * from users limit 100";

    $res = mysql_query($sql);

    while($row = mysql_fetch_array($res)){

    echo "";

    foreach($t_field as $f_key){

    echo "".$row[$f_key]."";

    }

    echo "";

    }

    echo "";

    ?>等等 许多, 具体的在后盾网里面有详细的。

    如何接收layui上传excel上传及php处理

    《Layui数格的绑定》

    开发工具与关键技术:Visual Studio /.NET /layui插件

    :肖春庆

    撰写时间:201906月17日

    在我们使用软件的当中有着许多数据在数据库里是需要我们进行数据的绑定,一般应用的是数据表格的绑定。并且显示给用户进行应用等等。我们知道数据在数据库里没有进行应用,那么数据库里的数据就是没有勇武之地,所以要进行数据表格的绑定。在这里我们应用layui致力于通过了分页逻辑,既可以轻松的进行绑定分页,也可以作为页面刷新分页的处理。

    指定向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。把layui的插件进行引用。要引用css样式布局的插件,它自定义了一些视图布局,我们可以根据自己的需求进行调用即可,同时它还进行了JS一些功能的封装,同样我们只需要根据自己的需求进行调用。

    layui 表格怎样地址接口数据格式不对应怎么处理

    php 把数据导出到excel表多种方法,比用 phpExcel 等,以下代码是直接通过 header 生成 excel 文件码示例:

    header("Content-type:application/vnd.ms-excel");

    header("Content-Disposition:filename=xls_region.xls");

    $cfg_dbhost = 'localhost';

    $cfg_dbname = 'testdb';

    $cfg_dbuser = 'root';

    $cfg_dbpwd = 'root';

    $cfg_db_language = 'utf8';

    // END 配置

    //链接数据库

    $link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd);

    mysql_select_db($cfg_dbname);

    //选择编码

    mysql_query("set names ".$cfg_db_language);

    //users表

    $sql = "desc users";

    $res = mysql_query($sql);

    echo "";

    //导出表头(也就是表中拥有的字段)

    while($row = mysql_fetch_array($res)){

    $t_field[] = $row['Field']; //Field中的F要大写,否则没有结果

    echo "

    ".$row['Field']."

    ";

    }

    echo "";

    //导出100条数据

    $sql = "select * from users limit 100";

    $res = mysql_query($sql);

    while($row = mysql_fetch_array($res)){

    echo "";

    foreach($t_field as $f_key){

    echo "".$row[$f_key]."";

    }

    echo "";

    }

    echo "";

    ?>等等 许多, 具体的在后盾网里面有详细的。

    展开全文
  • 一开始没正确找着通过条件查询重载数据表格数据官方的API案例 走了许多弯路 官方源码 var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('...
  • 数据表格 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
  • 然后搜索,触发layui数据重载,调用新接口,传入数据,返回新数据。 ``` //搜索 $("#ss").click(function(){ if(brandId==undefined){ brandId=0; } if(categoryId==undefined){ ...
  • html页面结构: 所以找到em标签中的这个文本,然后跳转到这一页就好了。 代码如下: let currpage = $('.layui-laypage-em').next().text(); table.reload('systemCert', { page: { curr: currpage } });
  • 在工作的时候用到了layui数据表格,需要实现一个重载功能,是搜索框模糊查询的功能,官方示例的文档(官方链接:https://www.layui.com/demo/table/reload.html) 上说的是 传值需要放到一个key:{}里,反复...
  • LayUI数据表格重载与查询功能实现

    千次阅读 2020-01-17 14:13:28
    (框架:前端使用LayUI,后端Spring) 搜索框: 代码: <form action="" class="layui-form"> <div class="layui-inline"> <input class="layui-input" name="name" id="name" placeholder="请...
  • layui数据表格重载怎么往后台传参

    万次阅读 2018-11-21 18:07:49
    1、网上的代码: ...layui-inline"&gt; &lt;input class="layui-input" name="keyword" id="demoReload" autocomplete="off"&gt; &
  • 使用情况:当发生指定动作时,进行数据表格重载,并自动计算,展示最后一页 let pageSize = $('.layui-laypage-limits').find('select').val();//获取表格每页展示的数据行数 let totalCode= meterCodeData.length...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 205
精华内容 82
关键字:

layui数据表格重载