layui表格排序问题

提问 未结
17 268
为你执笔
悬赏:20飞吻
版本:layui 2.2.6 浏览器:谷歌
 table.render({
elem: '#LAY_table_user'
,url: '<?php echo site_url("layui/layui_data");?>'
,cols: [[
{checkbox: true, fixed: true}
,{field:'xunjiah', title: '询价号', width:180, fixed: true}
,{field:'zubie', title: '组别', width:80}
,{field:'xiaoshouy', title: '销售员', width:100}
,{field:'yiyuan', title: '医院', width:200}
,{field:'keshi', title: '科室', width:100}
,{field:'peizhizt', title: '配置主题', width:300}
,{field:'shifouxyzb', title: '是否需要招标', width:120}
,{field:'qhdinghuoycrq', title: 'QH订货预测日期', width:150, sort: true}
,{field:'fahuoycrq', title: '发货预测日期', width:150}
,{field:'jingxiaoshtqdrq', title: '经销商合同签订日期', width:180}
,{field:'hetongfl', title: '合同分类', width:100}
,{field:'qhxunjiazt', title: 'QH询价状态', width:150}
,{field:'ocmxunjiazt', title: 'OCM询价状态', width:150}
,{field:'ocmdinghuozk', title: 'OCM订货折扣', width:150}
,{field:'ocmdingjinzfrq', title: 'OCM订金支付日期', width:200}
,{field:'ocmdingjinje', title: 'OCM订金金额', width:150}
,{field:'ocmdingjinbl', title: 'OCM订金比例', width:150}
,{field:'ocmdinghuojxs', title: 'OCM订货经销商', width:200}
,{field:'shifoupd', title: '是否拼单', width:150}
,{field:'huoqi', title: '货期', width:150}
,{field:'ocmyukuanzfrq', title: 'OCM余款支付日期', width:200}
,{field:'ocmyukuanje', title: 'OCM余款金额', width:150}
,{field:'ocmfahuorq', title: 'OCM发货日期', width:150}
,{fixed: 'right', title: '操作', width:150, align:'center', toolbar: '#barDemo'} //这里的barDemo值是模板元素的选择器
]]
,id: 'testReload'
,page: true
,height: 500
});
模拟数据可以排序,一请求服务端就报错
回帖
  • 最好把你代码贴上来
    0 回复
  • @FIRSTK 代码放上来了[微笑]
    0 回复
  • luoye
    7天前
    服务端返回的数据有没有sort所在的那个字段qhdinghuoycrq
    0 回复
  • @luoye 有啊
    0 回复
  • 0 回复
  • luoye
    7天前
    看看这个帖子有个回复的修改方法,看看有没有用
    http://fly.layui.com/jie/13843/
    0 回复
  • @luoye 这个相当于在本地排序,只排序当前页,并没有请求数据库重新排序
    0 回复
  • @为你执笔
    监听排序切换
    table.on('sort(test)', function(obj)
    这个有没
    0 回复
  • @FIRSTK
    //监听排序
    table.on('sort(user)', function(obj){
    table.reload('testReload', {
    initSort: obj
    ,where: {
    field: obj.field //排序字段
    ,order: obj.type //排序方式
    }
    });
    });
    这个后台如何接收,没有看见传值过去
    0 回复
  • @FIRSTK
     //监听排序
    table.on('sort(user)', function(obj){
    console.log(obj.field); //当前排序的字段名
    console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
    console.log(this); //当前排序的 th 对象
    table.reload('testReload', {
    initSort: obj
    ,where: {
    field: obj.field //排序字段
    ,order: obj.type //排序方式
    }
    });
    });
    控制台都打印不出来
    0 回复
  • field: obj.field //排序字段,
    order: obj.type //排序方式
    就是这两个参数
    0 回复
  • @为你执笔
    table.on('sort(user)', function(obj)
    user是table原始容器的属性 lay-filter="对应的值"
    0 回复
  • @FIRSTK 服务端接收说没有定义变量
    $field = $_GET ['field'];
    $order = $_GET ['order'];
    表格原始容器
    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    默认这样
    ,initSort: {
    field: 'qhdinghuoycrq' //排序字段,对应 cols 设定的各字段名
    ,order: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
    }
    监听这样
    //监听排序
    table.on('sort(user)', function(obj){
    table.reload('testReload', {
    initSort: obj
    ,where: {
    field: obj.field //排序字段
    ,order: obj.type //排序方式
    }
    });
    });
    还是一样的错误
    0 回复
  • @为你执笔 浏览器控制台传递的参数呢,另外还有一个就是你layui的版本是多少,顺便清理下缓存
    0 回复
  • @FIRSTK
    版本/** layui-v2.2.6 MIT License By https://www.layui.com */
    0 回复
  • @FIRSTK
    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>
    <script>
    layui.use('table', function(){
    var table = layui.table;
    //方法级渲染
    table.render({
    elem: '#LAY_table_user'
    ,url: '<?php echo site_url("layui/layui_data");?>'
    ,cols: [[
    {checkbox: true, fixed: true}
    ,{field:'xunjiah', title: '询价号', width:180, fixed: true}
    ,{field:'zubie', title: '组别', width:80}
    ,{field:'xiaoshouy', title: '销售员', width:100}
    ,{field:'yiyuan', title: '医院', width:200}
    ,{field:'keshi', title: '科室', width:100}
    ,{field:'peizhizt', title: '配置主题', width:300}
    ,{field:'shifouxyzb', title: '是否需要招标', width:120}
    ,{field:'qhdinghuoycrq', title: 'QH订货预测日期', width:150, sort: true}
    ,{field:'fahuoycrq', title: '发货预测日期', width:150}
    ,{field:'jingxiaoshtqdrq', title: '经销商合同签订日期', width:180}
    ,{field:'hetongfl', title: '合同分类', width:100}
    ,{field:'qhxunjiazt', title: 'QH询价状态', width:150}
    ,{field:'ocmxunjiazt', title: 'OCM询价状态', width:150}
    ,{field:'ocmdinghuozk', title: 'OCM订货折扣', width:150}
    ,{field:'ocmdingjinzfrq', title: 'OCM订金支付日期', width:200}
    ,{field:'ocmdingjinje', title: 'OCM订金金额', width:150}
    ,{field:'ocmdingjinbl', title: 'OCM订金比例', width:150}
    ,{field:'ocmdinghuojxs', title: 'OCM订货经销商', width:200}
    ,{field:'shifoupd', title: '是否拼单', width:150}
    ,{field:'huoqi', title: '货期', width:150}
    ,{field:'ocmyukuanzfrq', title: 'OCM余款支付日期', width:200}
    ,{field:'ocmyukuanje', title: 'OCM余款金额', width:150}
    ,{field:'ocmfahuorq', title: 'OCM发货日期', width:150}
    ,{fixed: 'right', title: '操作', width:150, align:'center', toolbar: '#barDemo'} //这里的barDemo值是模板元素的选择器
    ]]
    ,id: 'testReload'
    ,page: true
    ,height: 500
    ,initSort: {
    field: 'qhdinghuoycrq' //排序字段,对应 cols 设定的各字段名
    ,order: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
    }
    ,where: {
    key:{
    xunjiah: "",
    xiaoshouy:"",
    yiyuan: "",
    kehsi: "",
    peizhizt: "",
    shifouxyzb: "",
    qhxunjiazt: "",
    ocmxunjiazt: "",
    qhdinghuoycrq: "",
    fahuoycrq: "",
    jingxiaoshtqdrq: "",
    ocmdinghuozk: "",
    ocmdingjinzfrq: "",
    ocmdingjinje: "",
    ocmdingjinbl: "",
    ocmdinghuojxs: "",
    hetongfl: "",
    shifoupd: "",
    huoqi: "",
    ocmyukuanzfrq: "",
    ocmyukuanje: "",
    ocmfahuorq: ""
    }
    }
    });

    var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
    var checkStatus = table.checkStatus('testReload')
    ,data = checkStatus.data;
    layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
    var checkStatus = table.checkStatus('testReload')
    ,data = checkStatus.data;
    layer.msg('选中了:'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
    var checkStatus = table.checkStatus('testReload');
    layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
    ,reload: function(){
    var xunjiah = $('#seach_key');
    var xiaoshouy = $('#seach_key1');
    var yiyuan = $('#seach_key2');
    var ocmxunjiazt = $('#seach_key4');
    var qhxunjiazt = $('#seach_key5');
    var kehsi = $('#seach_key7');
    var peizhizt = $('#seach_key8');
    var shifouxyzb = $('#seach_key9');
    var qhdinghuoycrq = $('#seach_key10');
    var fahuoycrq = $('#seach_key11');
    var jingxiaoshtqdrq = $('#seach_key12');
    var ocmdinghuozk = $('#seach_key13');
    var ocmdingjinzfrq = $('#seach_key14');
    var ocmdingjinje = $('#seach_key15');
    var ocmdingjinbl = $('#seach_key16');
    var ocmdinghuojxs = $('#seach_key17');
    var hetongfl = $('#seach_key18');
    var shifoupd = $('#seach_key19');
    var huoqi = $('#seach_key20');
    var ocmyukuanzfrq = $('#seach_key21');
    var ocmyukuanje = $('#seach_key22');
    var ocmfahuorq = $('#seach_key23');
    //执行重载
    table.reload('testReload', {
    page: {
    curr: 1 //重新从第 1 页开始
    }
    ,where: {
    key: {
    xunjiah: xunjiah.val(),
    xiaoshouy:xiaoshouy.val(),
    yiyuan: yiyuan.val(),
    kehsi: kehsi.val(),
    peizhizt: peizhizt.val(),
    shifouxyzb: shifouxyzb.val(),
    qhxunjiazt: qhxunjiazt.val(),
    ocmxunjiazt: ocmxunjiazt.val(),
    qhdinghuoycrq: qhdinghuoycrq.val(),
    fahuoycrq: fahuoycrq.val(),
    jingxiaoshtqdrq: jingxiaoshtqdrq.val(),
    ocmdinghuozk: ocmdinghuozk.val(),
    ocmdingjinzfrq: ocmdingjinzfrq.val(),
    ocmdingjinje: ocmdingjinje.val(),
    ocmdingjinbl: ocmdingjinbl.val(),
    ocmdinghuojxs: ocmdinghuojxs.val(),
    hetongfl: hetongfl.val(),
    shifoupd: shifoupd.val(),
    huoqi: huoqi.val(),
    ocmyukuanzfrq: ocmyukuanzfrq.val(),
    ocmyukuanje: ocmyukuanje.val(),
    ocmfahuorq: ocmfahuorq.val()
    }
    }
    });
    }
    };

    $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    //alert(type);
    active[type] ? active[type].call(this) : '';
    });
    //监听表格复选框选择
    table.on('checkbox(user)', function(obj){
    console.log(obj)
    });
    //监听排序
    table.on('sort(user)', function(obj){
    table.reload('testReload', {
    initSort: obj
    ,where: {
    field: obj.field //排序字段
    ,order: obj.type //排序方式
    }
    });
    });
    //监听工具条
    table.on('tool(user)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    //排序
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if(layEvent === 'detail'){ //查看
    //do somehing
    //layer.msg('ID:'+ data.xunjiah + ' 的查看操作');
    //var xunjiah=this.getAttribute('val');
    var url="<?php echo site_url().'/data/xunjia_info2/';?>"+data.xunjiah;
    window.location.href=url;
    } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
    layer.close(index);
    //向服务端发送删除指令
    });
    } else if(layEvent === 'edit'){ //编辑
    //do something
    layer.alert('编辑行:<br>'+ JSON.stringify(data))

    //同步更新缓存对应的值
    obj.update({
    username: '123'
    ,title: '哦哦'
    });
    }
    });

    });
    </script>
    0 回复
  • 不太会表达,看图吧,不懂再追...
    0 回复