数据表格标题栏排序,点击后select下拉菜单控件就重载了,数据消失。

提问 已结 5 349
ioripalm
ioripalm 2019-1-8
悬赏:20飞吻
版本:layui 2.4.5 浏览器:chrome
数据表格是用标题栏排序参数sort: true
表格内有一栏是select下拉菜单控件,方法渲染的时候可以正常显示菜单项。



一旦点击排序任意标题栏,select下拉菜单控件就会被重载,数据消失。
请问这如何解决?

回帖
  • 这个有两个有关系的需要注意,一个就是你初始化这个select的时候是否设置了对应的下拉的value和option里面的selected,第二个是你select change的时候是否记录到表格的缓存数据或者持久化起来,这两个缺一都会出现重新排序之后没有默认选中的问题额
    1 回复
  • @ioripalm 就是要利用form监听select,然后把当前的值更新到table.cache中,但是看你是监听然后持久化了,理论上没有出错的话就已经在数据库里面了对吧,那么点击排序的话实际如果简单处理就是直接用服务端排序,让它从新请求一下,然后设置autoSort为false,如果不想要重新请求,只要前端排序,autoSort就是true,然后sort排序不要reload,那么这个的话更新到table.cache是必须的,但是即使是用后台排序,实际更新到cache也是一个必要的过程,只有更新进去cache后面比如没有点击排序啥的,用table.checkStatus之类的才能拿到是你最近的数据。之前写过类似的你可以参考一下思路额:
    // 监听修改update到表格中
    form.on('select(testSelect)', function (data) {
    var elem = $(data.elem);
    var trElem = elem.parents('tr');
    var tableData = table.cache['grid'];
    // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
    tableData[trElem.data('index')][elem.attr('name')] = data.value;
    // 其他的操作看需求 TODO
    });
    1 回复
  • 是的,table中的实现下拉框问题还是比较多的,如果只有一列下拉框,可能还好点,如果还有其他文本,日期之类的,会有很多坑,最后还是放弃了,等3.0的table了
    0 回复
  • ioripalm
    2019-1-9
    @岁月小偷
    这是我初始化select的脚本:
    {field: 'VISATYPE',title: 'VISATYPE',sort: true,templet: function (d) {
    return '<select name="visaTypeSelect" lay-filter="testSelect" lay-verify="required" id="'+d.PREENROLID+'" data-value="' + d.VISATYPE + '" >\n' +
    ' <option value=""></option>\n' +
    ' <option value="1">Student Visa</option>\n' +
    ' <option value="2">Work Visa</option>\n' +
    ' <option value="3">Permanent Resident Visa</option>\n' +
    ' <option value="4">Resident Visa</option>\n' +
    ' <option value="5">Visitor\'s Visa</option>\n' +
    ' </select>';
    }},
    初始化select使用了这个css不然select选项不显示:
    layform.on用来监听用户改变并调整数据库

    done: function (res, curr, count) {
    $("select[name='visaTypeSelect']").each(function (index, item) {
    var elem = $(item);
    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
    });
    layform.on('select(testSelect)', function(data){
    for (var i = res.data.length - 1; i >= 0; i--) {
    selectData = res.data[i];
    if(selectData.PREENROLID == data.elem.id){
    selectData.Active = "EditApplication";
    selectData.VISATYPE = data.value;
    $.ajax({
    type: "POST",
    url: "active.php",
    data: selectData,
    success: function(msg) {
    // console.log(msg);
    }
    });
    }
    }
    });
    layform.render();//渲染select控件
    }
    请问您说的记录到表格缓存是怎么做?
    0 回复
  • stock2
    2019-3-8

    @ioripalm ,请问重新排序后,如何再重新绑定控件? 我的是日期。好不容易可以选择日期了。 结果一排序,直接点击 都不弹出日期控件了。 和你的问题是一样的。
    请问如何解决的? 谢谢
    0 回复