若依js 加 bootstrap 包含所有的写法等等

原创已于 2024-06-04 17:06:42 修改 · 203 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html

于 2022-08-30 17:59:33 首次发布

前端html js 同时被 2 个专栏收录

15 篇文章

订阅专栏

若依

4 篇文章

订阅专栏

列表上方的按钮代码

列表行后面的按钮代码

进入页面初始化根据后台传过来的参数动态查询列表

列表上方的按钮代码

 <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="bac:investmentreview:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            
            <a class="btn btn-success single disabled" onclick="$.operate.detailTab()" shiro:hasPermission="bac:investmentreview:edit">
                <i class="fa fa-info-circle"></i> 查看
            </a>
            <a class="btn btn-primary single disabled"  onclick="$.operate.editFull()" shiro:hasPermission="bac:investmentreview:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="bac:investmentreview:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="bac:investmentreview:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>

列表行后面的按钮代码

{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success" onclick="$.operate.addTab()" ><i class="fa fa-plus"></i> 新增</a>');
//editTab:打开小弹窗
                    actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a>');
//查看
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看</a> ');

//editTab:打开全屏弹窗
                    actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>修改</a>');
                    actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                    return actions.join('');
                }
            }

bootstrap  table  请求url

 查询列表
url: prefix + "/list",
 添加页面
createUrl: prefix + "/add",

编辑页面：
updateUrl: prefix + "/edit/{id}",

查看详情页面
detailUrl: prefix + "/show/{id}",

删除
removeUrl: prefix + "/remove",

导出
exportUrl: prefix + "/export",

onclick="$.operate.addTab()   调用  createUrl 对应的url
onclick="$.operate.editTab(\'' + row.id + '\')"   调用  updateUrl 对应的url
onclick="$.operate.editFull(\'' + row.id + '\')"  调用  updateUrl 对应的url
onclick="$.operate.remove(\'' + row.id + '\')"    调用  removeUrl 对应的url
onclick="$.operate.detailTab()"    调用  detailUrl对应的url
onclick="$.table.exportExcel()"     调用  exportUrl对应的url

进入页面初始化根据后台传过来的参数动态查询列表

queryParams:function (){
var tem = {projectId:"[[${project.projectId}]]",
"params[beginApplyTime]" : $("#startTime").val(),
"params[endApplyTime]" : $("#endTime").val(),}
return tem
},

 options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            queryParams:function (){
                var tem = {projectId:"[[${project.projectId}]]",
                "params[beginApplyTime]" : $("#startTime").val(),
                "params[endApplyTime]" :  $("#endTime").val(),}
                return tem
            },
            modalName: "项目进展",
            sortName: 'processId',
            sortOrder: "desc",
            columns: [{
                checkbox: true
             {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        // actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.processId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.processId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);