您的当前位置:首页正文

angularjs-ui-router的使用

2024-12-08 来源:个人技术集锦

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;
        }
    }]
});

5.orgMemberList.html页面

<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>

6.orgTree.html页面内容,这里为测试内容

<div>
tree
</div>
7.显示效果
显示全文