工作收获

最新推荐文章于 2021-08-17 14:01:25 发布

TELOBE

最新推荐文章于 2021-08-17 14:01:25 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/TELOBE/article/details/110202028

版权

bootstrap子页面填充父页面

bootstrap的table活用显示弹窗父页面填充

                onPageChange:function(){
                    setTimeout(checkByParent,1000);
                    //checkByParent();
                },
                onCheck:function(row,e){
                    if(parent.selTask.indexOf(row.taskId)<0){
                        parent.selTask.push(row.taskId);
                    }
                    row[0]=false;
                    parent.$('#demo-custom-toolbar').bootstrapTable('remove', {field: 'taskId',values: [row.taskId] });
                    parent.$('#demo-custom-toolbar').bootstrapTable('append', [row]);
                },
                onUncheck:function(row,e){
                    var index=parent.selTask.indexOf(row.taskId);
                    parent.selTask.splice(index,1);
                    parent.$('#demo-custom-toolbar').bootstrapTable('remove', {field: 'taskId',values: [row.taskId] });
                    //delete parent.selTask[index];
                },
                onCheckAll: function (rowsAfter,rowsBefore) {
                    if(rowsAfter!=undefined&&rowsAfter!=null){
                        for(var i=0;i<rowsAfter.length;i++){
                            parent.selTask.push(rowsAfter[i].taskId);
                            rowsAfter[i][0]=false;
                            parent.$('#demo-custom-toolbar').bootstrapTable('remove', {field: 'taskId',values: [rowsAfter[i].taskId] });
                            parent.$('#demo-custom-toolbar').bootstrapTable('append', [rowsAfter[i]]);
                        }
                    }
                    console.log(rowsAfter);


                },
                onUncheckAll: function (rowsAfter,rowsBefore) {
                    console.log(rowsBefore);
                    if(rowsAfter!=undefined&&rowsAfter!=null){
                        for(var i=0;i<rowsAfter.length;i++){
                            var index=parent.selTask.indexOf(rowsAfter[i].taskId);
                            parent.selTask.splice(index,1);
                            parent.$('#demo-custom-toolbar').bootstrapTable('remove', {field: 'taskId',values: [rowsAfter[i].taskId] });
                        }
                    }
                    console.log(rowsAfter)
                }

添加如上代码到tableInit里面可以实现子页面勾选父页面填充

其中有几点注意

其中的selTask参数要在父页面定义： var selTask=[];

function checkByParent(){
    console.log(parent.selTask);
    $('#demo-custom-toolbar').bootstrapTable('checkBy', {field: 'documentId', values:parent.selTask});
}

此方法要放在document.ready部分

父页面打开方式选择layui.open 不能使用parent.layui.open

多选下拉框插件

<select id="expert" data-placeholder="选择参会专家" multiple tabindex="4" name="expert">
    <c:forEach items="${experts}" var="e">
        <option value="${e.userId}" <c:if test="${p.expert.indexOf(e.userId)>-1}">selected</c:if>>${e.nickName}</option>
    </c:forEach>
</select>

普通下拉框配上以下代码

$(function () {
    $('#expert').fSelect({
        placeholder: '请选择汇总人',
        numDisplayed: 4,
        overflowText: '{n} 选中',
        searchText: 'Search',
        showSearch: false
    });
})

可以实现好看的多选下拉框（样式不能少哦）

.fs-wrap {
    width: 100%;
    height: 48px;
    line-height: 40px;
    font-size: 16px;
}
.fs-dropdown{
    margin-top: 0px;
}
.fs-label-wrap{
    border: 2px #f3f3f7 solid;
    border-radius: 4px;
}

对于时间插件使用下面的代码

$(function () {
    /*时间选择器开始*/
    $('#time').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        locale: moment.locale('zh-cn'),
        minView: 'month',
        pickTime: true,
        clearBtn: true
    })
})

加上input class="form-control inputFrame datapp" type="text" id="time" name="time" placeholder="会议时间" value="${p.time}">就可以完成时间插件