LayUI重置、排序、搜索、双击

 <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button class="layui-btn icon-btn" lay-filter="mxRefresh" lay-submit>
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>

                    </div>

<script>
  var insTb;
    //当前排序字段
	var orderField='';
	//当前排序方向
	var orderBy='';
	
 /* 渲染表格 */
        insTb = table.render({
            elem: '#roleTable',
            url: "{:url('admin/field_news/datalist')}",
            defaultToolbar: ['filter'],
            page: {
                limit: 20
            },
            limits: [20,50,100,200,500],
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn" data-type="add"><i class="layui-icon">&#xe654;</i>新增</button>&nbsp;',
                '<button lay-event="release" class="layui-btn layui-btn-sm icon-btn layui-bg-blue" data-type="release"><i class="layui-icon">&#xe63c;</i>批量发布</button>&nbsp;',
				'<button lay-event="remove" class="layui-btn layui-btn-sm icon-btn layui-bg-blue" data-type="remove"><i class="layui-icon">&#xe609;</i>批量撤下</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>批量删除</button>',
                '</p>'
            ].join(''),
            cellMinWidth: 100,
            cols: [
                [
					{type: 'checkbox', fixed: 'left'},
                    {field: 'news_title',title: '新闻标题',align: 'center',width: 250},
                    {field: 'news_abstract',title: '摘要',align: 'center',width: 300},
                    {field: 'author',title: '作者',align: 'center',width: 130},
                    {field: 'read_times',title: '阅读数',align: 'center',width: 130},
                    {field: 'priority_value',title: '优先值',align: 'center',width: 130},
                    {field: 'cur_status',title: '状态',align: 'center',width: 170,templet:function(d){
						if(d.cur_status==1){
							return '<span class="layui-badge layui-badge-red">未发布</span>';
						}else{
							
							return '<span class="layui-badge layui-badge-green">已发布</span>';
						}
					}},
					{field: 'is_index',title: '是否首页显示',templet: '#userTbState',align: 'center',width: 150},
                    {field: 'come_from',title: '来源',align: 'center',width: 150},
                    {field: 'cdate',title: '创建时间',align: 'center',width: 170},
                    {field: 'review_date',title: '发布时间',align: 'center',width: 170},
                    {fixed: 'right',title: '操作',toolbar: '#roleTbBar',align: 'center',width: 220}
                ]
            ],
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
        });

//监听双击事件
        table.on('rowDouble(roleTable)',function(obj){
			layer.open({
				type: 2,
				title: '详情',
				area: ['900px', '80%'],
				fixed: false,
				content: "{:url('admin/field_news/detail')}?id="+obj.data.id
			});
        });
   /* 表格
   搜索 */
        form.on('submit(mxTbSearch)', function(data) {
			data.field.field = orderField;
            data.field.type = orderBy;
            insTb.reload({
                where: data.field,
                page: {
                    curr: 1
                },
                url: "{:url('admin/field_news/serach')}"
            });
            return false;
        });

 //表格排序事件
        table.on('sort(roleTable)', function(obj) {
            // console.log(obj.field); //当前排序的字段名
            // console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
            // console.log(this); //当前排序的 th 对象
            //获取排序后的表格数据
            // console.log($('input[name=bill_no]').val());
            //当前排序字段
            orderField=obj.field;
            //当前排序方向
            orderBy=obj.type;
            //表格排序 、表格刷新
            insTb.reload({
                where: {
                    news_title:$('input[name=news_title]').val(),
                    news_abstract:$('input[name=news_abstract]').val(),
                    cdate:$('input[name=cdate]').val(),
                    cur_status:$('select[name=cur_status]').val(),
                    field:orderField,
                    type:orderBy
                },
                // page: {
                //     curr: 1
                // },
                url: "{:url('admin/field_news/serach')}"
            });
            return false;

        });	
        </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值