layui项目知识点总结

1、input单选框——获取选中值和设置选中值

需求：修改数据段时候，需要先去取到用户类型，然后让单选框对应的值选中。

原生js获取选中值 & 设置选中值

//获取
if(document.getElementById("reserve_yes").checked){
    reserve=yes;
}
else if(document.getElementById("reserve_no").checked){
    reserve=no;
}
//选中
document.getElementById('radio_yes']).checked=true;

jQuery获取选中值 & 设置选中值

//获取
$("input[type='radio']:checked").val();
//选中
$('#radio_yes']).attr("checked",true);

项目代码实现如下：

const base_url = "http://127.0.0.1:3000";
    var userid = location.search.split('=')[1];
    $.ajax({
        url: base_url + "/users/" + userid,
        type: "get",
        success: function (res) {
            $("input[name='barcode']").val(res.barcode);
            $("input[name='name']").val(res.name);
            if (res.memberType == 'Staff') {
                $("input[value='Staff']").attr("checked", true);
            } else {
                $("input[value='Student']").attr("checked", true);
            }
        }
    })

2、layUI中table表格的初始数据渲染以及表格分页功能

 初始数据渲染

 table.render({
            elem: '#userData',
            //url: base_url + "/users",
            data: data,
            cols: [
                [{
                        field: 'id',
                        title: 'userId',
                        width: 120
                    }, {
                        field: 'barcode',
                        title: 'Barcode',
                        width: 120
                    },
                    {
                        field: 'name',
                        title: 'Name',
                        width: 150
                    },
                    {
                        field: 'memberType',
                        title: 'member Type',
                        width: 150
                    },
                    {
                        field: 'createdAt',
                        title: 'craete Time',
                        width: 10
                    },
                    {
                        field: 'updatedAt',
                        title: 'upadate Time',
                        width: 100
                    },
                    {
                        fixed: 'right',
                        title: 'operation',
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]
            ],
            height: 400,
            limits: [6],
            page: {
                count: 100,
                limit: 8,
                layout: ['page']
            }
        });

使用了data给表格传输数据。url默认的请求方式为get,返回的数据格式有时候和规定的不一致，所以传data，为一个数组对象。

如果要开启分页，则字段page:true。会有特定的分页样式。如果需要自己定义分页样式，则给page的值写入对象，对象的属性可以count，limit，layout自己规定值。

3、联合数据表查询需要的数据

需求：提供了图书馆所有的图书接口以及所有的借出去的图书接口，现在需要展示在馆的图书

解决：两个接口联合查询

$.ajax({
            url: base_url + "/books",
            type: "get",
            success: function (res) {
                $.ajax({
                    url: base_url + "/loans",
                    type: "get",
                    success: function (books) {
                        for (var i = 0; i < res.length; i++) {
                            var isExist = false;
                            for (var j = 0; j < books.length; j++) {
                                if (res[i].id == books[j].BookId) {
                                    isExist = true;
                                    break
                                }
                            }
                            if (!isExist) {
                                result.push(res[i]);
                            }
                        }
                    }
                })
            }
        })

比较图书 id一致，则表示书籍已经借出，并且退出本次循环，如果loans接口返回的数据循环查询结束isExist都没有置为true。则给result里面压入此条数据。

4、ajax请求的异步问题

需求：页面一进来需要渲染表格数据，表格传入数据data，在ajax请求数据回来给data赋值，但是table报错说数据格式错误。其实是没有数据。因为请求是异步的，表格渲染的时候data还没有值。

解决：给Ajax请求加入字段

async:false;

则可以保证数据请求回来再渲染表格