网页跳转modeler 出现404， 在编辑模型时

Question

最后一张图是response.sendRedirect(request.getContextPath() + "/modeler.html?modelId=" + modelData.getId()); 重定向怎么会被视图解析器给拦截了，怎么跳过

Answer 1

上面是项目原型图,下面是我自己做的...缺了操作

Answer 2

你看一下手册，手册里面比较详细，

Answer 3

算得上是师傅是否梵蒂冈地方广东省十多个

Answer 4

源码中title和field 应该是column 的属性，你找到源码中定义该属性的地方，添加自已的属性，formatter = function（）{ 格式化源码中用field 获取到的对象的属性值}

Answer 5

第一步下载相应资源：地址：bootstrap table下载地址

第二步引用使用

1.引入 Bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.css 到 head 标签下。
[HTML] 纯文本查看 复制代码
?
1
2

2.引入 jQuery 库，bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前（一般建议这么做）。
[HTML] 纯文本查看 复制代码
?
1
2
3
4
5

<-- put your locale files after bootstrap-table.js -->

我们前台的处理很简单 只需要建立一个table并分配一个id
[HTML] 纯文本查看 复制代码
?
1
2
3
4
5
6

当然Bootstrap table还提供了一种简介的用法，直接在table标签里面定义类似“data-...”等相关属性，就不用再js里面注册了，但这种用法虽然简单，但不太灵活，所以咱们还是统一使用在js里面初始化的方式来使用table组件。
使用在js里面初始化的方式来使用table组件的写法:
[JavaScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$('#userTable').bootstrapTable({
url: '/admin/user/list', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [5,10,15,20], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,

        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: false,                //是否启用点击选中行

// height: 425, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: false,
columns: [{

            checkbox: true,
            align: 'center',
            valign: 'middle'
        }, {
            field: 'username',
            title: '用户名'
        }, {
            field: 'phone',
            title: '电话'
        }, {
            field: 'sex',
            title: '性别',
            formatter:sexFormatter
        }, {
            field: 'remarks',
            title: '备注'
        },  {
            field: "id",
            title: "操作",
            formatter: actionFormatter,
            align: 'center',
            valign: 'middle'
        }]
    });

表格的初始化也很简单，定义相关的参数即可。上面一些重要的参数都加了注释，并且初始化Table必须的几个参数也用（*）做了标记，如果你的表格也有太多的页面需求，直接用必须的参数就能解决。同样，在columns参数里面其实也有很多的参数需要设置，比如列的排序，对齐，宽度等等。这些我觉得比较简单，不会涉及表格的功能，看看API就能搞定。
关于js详细属性的配置可以自己翻看api文档。

在这里我要强调下我所遇到的问题：
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
这个属性我们如果有很多数据那么使用前台分页势必会对我们的项目造成性能上的影响所以最好还是使用后台的分页。
使用后台的分页需要注意:返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。
后台代码：
[Java] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
@RequestMapping("/list")
@ResponseBody
public Map list(int limit, int offset, String search) {
if(offset !=0){
offset = offset/limit;
}
offset+= 1;
EntityWrapper ew=new EntityWrapper();

   ew.like("username",search).orderBy("id",false);
   Page<User> page = userService.selectPage(new Page<User>(offset, limit),ew);
   Map<String, Object> map = new HashMap();
   map.put("total", page.getTotal());
   map.put("rows",page.getRecords());
   return map;

}

1.我们可以从方法的参数发现分页插件会给我们的后台传递这么几个参数：limit，offset，search
我们逐个来分析:
limit：每页查询的条数。
offset：查询的条数的偏移量。注意：这里offset不是页数我的后台需要传递一个页数去进行分页查询所以只能使用 (offset/limit)+1的方式来获取页数。
search：默认输入域中的值。
2.我们在 table的列（field）中使用了formatter这个属性。
（1）formatter:使用这个属性我们可以做一些简单的判断。
比如：
[JavaScript] 纯文本查看 复制代码
?
1
2
3
4
5
6
7
8
function sexFormatter(value, row, index) {
if (value == 1)
return "男";
else if (value == 2)
return "女";
else
return "未知";
}

进行了性别的判断 table获取的是1，2使用formatter进行了简单的替换。
（2）formatter:使用这个属性我们可以展示操作的按钮
[JavaScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
function actionFormatter(value, row, index) {
var state = row.state;
var id = row.id;
var res = '修改';
if (state == 1)
res += ' 禁用';
else
res += ' 启用';
res += ' 删除';
return res;
}

通过formatter将id传递可以实现单条数据的CRUD的操作。
3进行批量操作（比如批量删除）获取选中的id：
[JavaScript] 纯文本查看 复制代码
?
1
2
3
4
5
6
function getIdSelections() {
return $.map($("#userTable").bootstrapTable('getSelections'), function(row) {
//console.log("rowid=:"+ row.id)
return row.id
});
}

通过该方法就可以获取选中的id集合
进行批量删除的js如下：
[JavaScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var users = new Array()
users = getIdSelections();

if(users.length <=0){
layer.alert("请选择一条数据");
return;
}
layer.confirm('您确定要删除' + users.length + '条数据', {
btn: ['确定','取消'] //按钮
}, function(){
$.ajax({
type: 'POST',
url: "deleteBatch",
data: {ids: users},
traditional: true,//这里设置为true
success: function (status) {
if (status == 1) {
layer.msg('删除成功', {icon: 1});
$('#userTable').bootstrapTable('refresh', {url: '/admin/user/list'});
}else {
layer.msg('删除失败', {icon: 1});
}
},
dataType: "json"
});
}, function(){
layer.msg('您已取消操作', {
time: 1000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});

这样我们就可以实现用 bootstrap table 进行分页。

Answer 6

可以有这么做的可以有这么做的可以有这么做的可以有这么做的

Answer 7

你看一下手册，手册里面比较详细，

Answer 8

上网去找一找看看有没有相关的资源

Answer 9

你得先看看API。。。。。。。。。。。。。。。。

Answer 10

表格的初始化也很简单，定义相关的参数即可。上面一些重要的参数都加了注释，并且初始化Table必须的几个参数也用（*）做了标记，如果你的表格也有太多的页面需求，直接用必须的参数就能解决。同样，在columns参数里面其实也有很多的参数需要设置，比如列的排序，对齐，宽度等等。这些我觉得比较简单，不会涉及表格的功能，看看API就能搞定。
关于js详细属性的配置可以自己翻看api文档。

Answer 11

你直接配这个框架好了，这是下载地址：https://github.com/thinkgem/jeesite