1.新建org.html页面,在页面中引入依赖的js和css类库
2.定义两个ui-view用于显示组织树和组织人员列表内容
3.新建org.js文件
4.成员列表的定义
/**
* Created by zhong on 2015/9/7.
*/
$("#table").bootstrapTable({
pagination: true,//是否显示分页文字信息
search: true,//是否显示搜索输入框
showFooter: true,//是否显示表格底部的合计行
showColumns: true,//是否显示选择显示列的按钮
showRefresh: true,//是否显示刷新按钮
showToggle: true,//是否显示切换视图按钮
showPaginationSwitch: true,//是否显示“显示隐藏分页信息”的按钮
showExport: true,//是否显示导出按钮
idField: "id",//ID列
pageSize: 2,//没有显示的记录数
pageList: [1, 5, 10],
multiSort: true,
sortPriority: [{
"sortName": "name",
"sortOrder": "desc"
}],
//cardView:true,//默认是否以卡片布局显示
clickToSelect: true,
url: "data.json",
columns: [{
field: "checkboxColumn",
checkbox: true//显示checkbox
}, {
field: "id",
title: "ID"
}, {
field: "name",
title: "姓名",
sortable: true
}, {
field: "email",
title: "邮箱",
sortable: true
}, {
field: "phone",
title: "手机",
sortable: true
}, {
field: "actionColumn",
title: "操作",
formatter: function (value, row, index) {
var value = "<a href='wwww/te?id=" + row.id + "'>" + "删除</a>";
return value;
}
}]
});
<div>
<table data-toggle="table" id="table"></table>
</div>
<script>
/**
* Created by zhong on 2015/9/7.
*/
$("#table").bootstrapTable({
pagination: true,//是否显示分页文字信息
search: true,//是否显示搜索输入框
showFooter: true,//是否显示表格底部的合计行
showColumns: true,//是否显示选择显示列的按钮
showRefresh: true,//是否显示刷新按钮
showToggle: true,//是否显示切换视图按钮
showPaginationSwitch: true,//是否显示“显示隐藏分页信息”的按钮
showExport: true,//是否显示导出按钮
idField: "id",//ID列
pageSize: 2,//没有显示的记录数
pageList: [1, 5, 10],
multiSort: true,
sortPriority: [{
"sortName": "name",
"sortOrder": "desc"
}],
//cardView:true,//默认是否以卡片布局显示
clickToSelect: true,
url: "data.json",
columns: [{
field: "checkboxColumn",
checkbox: true//显示checkbox
}, {
field: "id",
title: "ID"
}, {
field: "name",
title: "姓名",
sortable: true
}, {
field: "email",
title: "邮箱",
sortable: true
}, {
field: "phone",
title: "手机",
sortable: true
}, {
field: "actionColumn",
title: "操作",
formatter: function (value, row, index) {
var value = "<a href='wwww/te?id=" + row.id + "'>" + "删除</a>";
return value;
}
}]
});
</script>
<div>7.显示效果
tree
</div>