起因:

        今天写页面的时候,遇到这么一个情景:一个弹窗里需要用到若依的表格,以及搜索框进行条件查询。但是测试时发现搜索框无效,于是就想法子重写了一个,方便以后查看。

 

解决方案:

        思路:

将bindZyz()这个表格清空,再重新新增

没错就是这么简单。

        上代码:

$(function () {
bindZyz();   //加载时生成表格
}

function bindZyz() {
        var options_zyz = {
            url: prefix + "/listZyzs",
            modalName: "绑定志愿者",
            id: "bootstrap-table2",
            pageSize: 5,
            pageList: [5, 15, 30],
            columns: [
                {
                    field: 'name',
                    title: '姓名',
                    align: 'center',
                    width: 100,
                },
                {
                    field: 'xb',
                    title: '性别',
                    align: 'center',
                },
                {
                    field: 'job',
                    title: '职务',
                    align: 'center',
                },
                {
                    field: 'telNum',
                    title: '手机',
                    align: 'center',
                },
                {
                    field: 'memo',
                    title: '备注',
                    align: 'center',
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {   //传入数据
                        return '<a class="btn btn-primary btn-xs" onclick="editBind(\'' + row.id + '\')"><i class="fa fa-edit"></i>绑定</a>';
                    }
                }]
        };
        $.table.init(options_zyz);
    }


    function searchZyz() {
        console.log("查找")
        let nameZyz = $("#nameZyz").val();
        let jobZyz = $("#jobZyz").val();
        let tel_numZyz = $("#tel_numZyz").val();

        $.operate.saveMsg(prefix + "/searchZyz", {
            nameZyz: nameZyz,
            jobZyz: jobZyz,
            tel_numZyz: tel_numZyz
        }, function (result) {
            console.log(result)
            if (result.code == web_status.SUCCESS) {
                var from = genData(result.data);
                console.log(from)
                // $('#bootstrap-table2').bootstrapTable('destroy');

                //清空数据表格
                $('#bootstrap-table2').bootstrapTable('removeAll');
                //重新新增
                $('#bootstrap-table2').bootstrapTable('append', from);
            }



            function genData(count) {

                var data = [];
                for (var i = 0; i < count.length; i++) {
                    var NAME = count[i].name;//定义数组   名字
                    var TELNUM = count[i].telNum;
                    var JOB = count[i].job;
                    var MEMO = count[i].memo;
                    var ID = count[i].id;
                    var XB = count[i].xb;

                    data.push({
                        dw_id:'',
                        user_id: ID,
                        name: NAME,
                        xb: XB,
                        job: JOB,
                        telNum: TELNUM,
                        memo: MEMO
                    })
                }
                return data;
            }
        });
    }

结果:达到预期显示结果。

 

总结:

多学习大佬们的写法,特别是若依框架,越用越觉得奇妙。

Logo

快速构建 Web 应用程序

更多推荐