ua-angular 树结构、grid数据表的使用

原创

已于 2023-06-29 16:55:54 修改 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #css #javascript

于 2020-08-31 18:08:00 首次发布

本文介绍了如何在AngularJS应用中利用ua-angular库创建树状结构和网格数据表。首先，通过HTML来定义视图结构，然后用JS进行数据绑定和交互逻辑的设置，最终展示出清晰易用的树结构与表格效果。

HTML

<link rel="stylesheet" type="text/css" href="CRC.CommonApp/widgets/jstree/themes/default/style.min.css">
<style>
    .row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
    }

        .row > [class*='col-'] {
            flex-direction: column;
        }



    .grid {
        width: 100%;
        height: 100%;
    }

    .ng-tree-search {
        width: 100%;
        margin-bottom: 5px;
    }

    .panel-Title {
        background-color: #fff;
        color: #333;
        height: 44px;
        line-height: 44px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: bold;
        font-size: 20;
        width: 100%;
    }
</style>


<div class="row" style="height:100%;">
    <div class="col-xs-8" style="height: 100%;">
        <div id="treeContainer" class="content-area content-area-relative"
             style="width:100%; height: 100%;overflow: hidden;padding-bottom: 10px;">
            <div style="margin: 16px 0 0 10px;overflow: auto; border: 1px solid #cccccc; background-color: #f6f6f6; width:calc(100%-10px); height: calc(100% - 16px); padding:10px 10px 0 10px">
                <js-tree tree-plugins="types,search" tree-types="typesConfig" tree-data="scope" tree-model="treeModel"
                         tree-core="treeCore" tree-events="changed:changedSelectedTree;"></js-tree>
            </div>
        </div>
    </div>
    <div class="col-xs-32" style="height: 100%;padding-left: 10px; ">
        <div class="row" style="height: 100px;padding-top: 16px;">
            <div class="col-xs-32">
                <sit-property-grid sit-id="select_form" sit-layout="Horizontal" sit-type="Fixed" sit-mode="edit"
                                   sit-columns="4">
                    <sit-property sit-widget="sit-datepicker" sit-value=""
                                  sit-validation="{required: false}" sit-read-only="false"
                                  sit-format="'yyyy-MM-dd'"
                                  sit-widgetAttributes="'yyyy-MM-dd'">开始日期:</sit-property>
                    <sit-property sit-widget="sit-datepicker" sit-value=""
                                  sit-validation="{required: false}"
                                  sit-format="'yyyy-MM-dd'"
                                  sit-widgetAttributes="'yyyy-MM-dd'"
                                  sit-read-only="false">
                        结束日期：
                    </sit-property>
                    <sit-property sit-widget="sit-text" sit-value="vm.queryParams.team.value.Name"
                                  sit-validation="{required: false}" sit-read-only="false">
                        名称:
                    </sit-property>


                </sit-property-grid>
            </div>
            <div class="col-xs-8">
                <button ng-click="vm.query()" class="btn btn-primary" ng-disabled='!vm.v