8天在线UED团队官方博客

CRM系统新代码说明 v0.5

2016-07-28 / / 20 条评论

目前收录：

  1. 提示框
  2. 通用打印
  3. 通用页面顶部
  4. UI-Grid表格
  5. Chart.js图表

 

1、提示框

屏幕快照 2016-07-28 下午6.36.55

之前使用的alert(); adAlerts(); adAlert();全部停用。目前使用：

$rootScope.addAlert("类型","提示文字");

类型包括：success、info、error 三种

提示文字直接告知提示内容既可，尽量简洁明了，不建议加说明语，如：’提示：密码输错了’。

正确示例：

$rootScope.addAlert("error","密码错误");

2、通用打印

打印不再需要单独的页面，任何页面都可以快速打印。使用@media print的属性，打印时自动隐藏导航和侧边栏。我们还提供了打印隐藏的Class，加入此Class的div和内容都不会被打印出来。

.er-print-hide

 

屏幕快照 2016-07-30 下午2.05.16

这是一个普通页面，按ctrl+p打印效果如下：

屏幕快照 2016-07-30 下午2.05.31

自动去除了侧边栏和顶部栏，只显示打印部分。

3、通用页面顶部

我们对页面顶部做了统一的样式处理，让页面功能区分更加明显。增加了顶部tapnav，搜索筛选和操作功能分开，操作功能收起在按钮中。搜索筛选条件使用统一的样式处理，并且支持响应式。具体使用方法见代码注释。

修改前：

屏幕快照 2016-07-30 下午5.11.18

 

 

 

修改后：

屏幕快照 2016-07-30 下午5.41.20

代码示例：

新版通用页面顶部-->
<div class="er-convention-nav flex">
    <button class="nav-btn active" id="nav-btn-search">筛选搜索&nbsp;<span class="caret nav-btn-search-arrow"></span></button>
    <!--button超过3个的时候显示更多-->
    <div class="dropdown">
        <button class="nav-btn" id="dLabel" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            操作&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
            <!--加入操作按钮,样式自动匹配,即使只有一个按钮,也放在这里。若没有按钮,注释整个.dropdown-->
            <button ng-show="isShowButton" ng-click="autoCreateOrder()">智能生成草稿</button>
            <button ng-show="isShowButton" ng-click="exportTemplete()">导入模版下载</button>
            <button ng-show="isShowButton" ng-file-select ng-file-change="importFile($files)">导入</button>
        </ul>
    </div>
    <!--这边一般不再往右扩展,除非巨大的功能改动-->
</div>

<form class="er-convention-search flex">
    <div class="search-input-box flex-1 flex flex-wrap">
        <!--条件筛选都写在这里, 只有.big和.small两种大小的框。支持响应。-->
        <div class="small">
            <!--除了input和select,文字都用span input select span无需加任何class-->
            <span>开始时间:</span>
            <input id="d4311" onChange="" type="text" ng-model="purchaseParams.startTime" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
        </div>
        <div class="big">
            <edol-orgCitylist on-group-change='changeGroup1(selectedGroup)' on-city-change="changeCity(selectedCity)" on-store-change="changeStore1(selectedStore)" show-Schoollist="false"></edol-orgCitylist>
        </div>
    </div>
    <div class="search-btn-box flex">
        <!--搜索按钮 需要添加type="submit"-->
        <button type="submit" ng-click="purchaseSearch()" class="flex-1"><i class="glyphicon glyphicon-search" aria-hidden="true"></i>&nbsp;搜索</button>
    </div>
</form>

<!--顶部筛选展开收起动作-->
  <script>
    $(document).ready(function() {
      $("#nav-btn-search").click(function () {
        $("#nav-btn-search").toggleClass("active")
        $(".er-convention-search").toggleClass("hide")
      });
    });
  </script>
<!--新版通用页面顶部 结束

 

4、UI-Grid表格

表格组件我们使用的是angular ui-grid，这个表格的执行效率非常高，可以很快的展示10000行数据。官网：http://ui-grid.info

屏幕快照 2016-08-03 下午4.57.50

下面我们来看一个基本的表格代码：

HTML

<div class="er-grid-box">
    <style ui-grid-style>
        .grid-yourGridName {height: 374px;}/*设置表格大小*/
    </style>
    <div id="yourGridName" ui-grid="yourGridName" ui-grid-auto-resize class="grid grid-yourGridName"></div>
    <!--ui-grid-auto-resize值使表格可以自适应宽度-->
</div>

JS

$scope.yourGridName = { //创建表格
      enableGridMenu: true, //开启隐藏列功能
      enableFiltering: true, //开启搜索筛选框
      columnDefs:[ 
          {field: 'id', displayName:'ID', width: '60'}, //表格列设置
          {field: 'name', displayName:'Name', width: '*'} //表格列设置
      ]
    };

$scope.yourGridName.data = data; //传JSON入数据

以上就是基础的功能，我们下面来看一下columnDefs内的数值有什么选项：

columnDefs:[
    {
        name: 'id', //数据value
        field: 'id', //数据value，和name只需用一个
        displayName:'ID', //显示的名称，不填写会显示name的值
        width: '60', //默认*，该列宽度，不设置或者设置*表示自动
        visible:true, //默认true，true表示直接展示出来，false表示隐藏在右上角标签里，可以手动选择展示出来
        cellClass:'', //添加Class，我们准备了一些样式标签：".align-right"右对齐，".align-center"居中，".align-left"左对齐,".primary"蓝色文字，".hot"红色文字
        cellTooltip:function(row) {return '编号: ' + row.entity.id;}}, //tip提示，鼠标移入2s出线的提示文字，纯文本。
        cellTemplate:'<div ng-click="grid.appScope.event()">{{row.entity.id}}</div>'//模板，可写html，"grid.appScope"用于引用外部方法，"row.entity"标示该行所有数据的JSON。我们为这里的HTML准备了2个class用于更好的展示：".er-grid-span"用于展示行内文字，".er-grid-btn"用于展示按钮
}
]

更多功能，请到官网学习。

 

5、Chart.js图表

我们使用angular chart.js来展示图表这实用的是html5的canves，效率很高。我们看一下效果：

屏幕快照 2016-08-06 下午3.57.17

这个表格的HTML代码是：

<!--这是一个标准的图表容器-->
<div class="er-chart">
        <!--图表的html写在这里面-->
        <canvas class="chart chart-line"
                chart-colors="colors"
                chart-data="data"
                chart-labels="labels"
                chart-series="series"
                chart-options="options"
                chart-dataset-override="datasetOverride"
                chart-click="onClick">
        </canvas>
</div>

我将canvas包裹在一个容器中，这样显示的样式更加美观。

JS代码是：

先引入

'chart.js'

 

//Line Chart
        $scope.colors = ['#00ACFA', '#cccccc', '#ff6384'];//色彩,不可缩写成#ccc。
        $scope.labels = ["2016-1-1", "2016-1-2", "2016-1-3", "2016-1-4", "2016-1-5", "2016-1-6", "2016-1-7" , "2016-1-8" , "2016-1-9" , "2016-1-10", "2016-1-11", "2016-1-12", "2016-1-13", "2016-1-14", "2016-1-15", "2016-1-16", "2016-1-17", "2016-1-18", "2016-1-19", "2016-1-20", "2016-1-21", "2016-1-22", "2016-1-23", "2016-1-24", "2016-1-25", "2016-1-26", "2016-1-27", "2016-1-28", "2016-1-29", "2016-1-30"];
        $scope.series = ['销量（万元）','数量（个）'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40 , 10 , 30 , 1,11,56,78,22,1,57,9,32,24,34,55,121,123,165,64,87,34,67,54,110],
            [98,0,11,57,9,32,24,34,55,121 ,10 , 30 , 1,11,56,78,22,1,65, 59, 80, 81, 56, 55, 40,123,165,64,87,34]
        ];
        //事件
        $scope.onClick = function (points, evt) {
            console.log(points, evt);
        };
        //多个坐标
        $scope.datasetOverride = [
            {
                yAxisID: 'y-axis-1'
            },
            {
                yAxisID: 'y-axis-2'
            }
            ];
        $scope.options = {
            //大小样式
            scales: {
                yAxes: [
                    {
                        id: 'y-axis-1',
                        type: 'linear',
                        display: true,
                        position: 'left',
                        scaleLabel:{
                            display:true,
                            labelString: '销量（万元）'
                        }
                    },
                    {
                        id: 'y-axis-2',
                        type: 'linear',
                        display: true,
                        position: 'right',
                        scaleLabel:{
                            display:true,
                            labelString: '数量（个）'
                        }
                    }
                ],
            },
            //标题
            title:{
                display:true,
                text:'这是一个销量图表',
                fontSize:16,

            },
            //图例
            legend:{
                display:true,
                position:'top',
            },

        };

这和官网的说明是一样的，我建议标题和图例都需要有，色彩设置可以按照

$scope.colors = ['#00ACFA', '#cccccc', '#ff6384'];

这个来设置就可以了。

附上官网连接：angular chart.js 、chart.js

 

5 个赞！

前端开发

上一篇文章
“菊次郎的夏天”之约
下一篇文章
互联网时代的在线合作方法&工具

评论（20）

  1. 预流

    2016-07-30 at 下午5:08

    提示信息API能不能简洁点，好记住，比如：

    $alert.success(“提示文字”)
    $alert.info(“提示文字”)
    $alert.error(“提示文字”)

  2. eWei (Post author)

    2016-08-05 at 上午10:08

    可以，我们已加入改进计划。

  4. Antoshkamiz

    2016-11-25 at 下午2:45

    “http://smelovsky.com/2008/11/01/iz-zhizni-detskogo-sadika/” – Из жизни детского садика

  5. Antoshkamiz

    2016-11-25 at 下午4:17

    “http://smelovsky.com/2016/07/31/139217/” –

  6. TermoPlenka

    2016-12-07 at 下午4:49

    Продам термоплёнку на окна. Новинка 2016 года.
    Характеритики теплосберегающей пленки с напылением:
    ширина-1.10 м
    длина – 6 м
    пленка- 6.6 кв.м.(на 3 окна)
    +рулон двухстороннего прозрачного скотча
    Цена 60 грн.
    Александр (alexandr_sheva/шабака/mail.ru) (067)-585-58-47

  7. MichaelPlomy

    2016-12-10 at 下午12:27

    esduds dsje sdjsdje dh

  8. Alinna777Hoove

    2016-12-23 at 上午4:06

    Белухин Дмитрий Николаевич, внес свой вклад в развитие парков москвы, организовывал культурные мероприятия!
    Устраивал выставки, также организовывал концерты, благотворительные вечера!
    В сегодняшнее время, таких людей как Белухин Дмитрий Николаевич, очень мало, хотим выразить благодарность этому человеку.
    За чистый город, и будущее России!

  9. Shawn765Mip

    2016-12-23 at 上午4:43

    Саблин Дмитрий Вадимович, человек – который делает невозможные вещи, не оставляя без внимания ни один значимый вопрос. Он уже много лет занимается социальными проблемами, работой с молодежью. Не оставляет без внимания и вопрос поддержки Сирийского народа, жителей Донбасса в эти непростые для них времена.

    Социальная поддержка ветеранов боевых действий – Дмитрий Вадимович Саблин занимается данным вопросом уже много лет. Сотни семей военнослужащих получают всестороннюю поддержку.

    Как считает Дмитрий Вадимович – без памяти о своих предках, не может быть разговоров о будущем России!

  10. Justindiors

    2016-12-23 at 上午8:26

    Hello. nice to read this, thanks! #nicelyrules11

  11. Memvklz

    2017-01-13 at 上午10:47

    minnie st claire gets mouth creampie teenager deep throat anal nikki sexx lies that she needs a massage amateur bbw gets messy facial after blowjob large dicks for teens japanese girl face fucked cumming sweet babe in bikini will make a tugjob
    hi!

  12. Memncas

    2017-01-13 at 下午10:03

    Pharmacy Compounding Pharmacy Times Pharmacy Galantis Pharmacy Healthcare Solutions Pharmacy Requirements Pharmacy Jobs Pharmacy Lamps Pharmacy For Sale In California Pharmacy Near Me Open Now
    hi!

  13. Mempkmr

    2017-01-14 at 上午1:36

    Pharmacy Program Pharmacy For Sale In California Pharmacy Queen Street Pharmacy Online Pharmacy Xenical Pharmacy Las Vegas Pharmacy News
    hi!

  14. Memxrmz

    2017-01-28 at 上午4:11

    reese rideout porn videos mature redhead and boy pounding jennifer white doggy style hot gay porn videos tumblr molly jane dressing naughty to get paid fucking dads his girlfriend splendid body alesia pleasure threeway german mature blowjob game
    hi!

  15. Lucky

    2017-03-19 at 上午12:26

    That hits the target dead cetrne! Great answer!

  16. Jamesboita

    2017-04-21 at 上午2:01

    Мало заботиться о состоянии здоровья своего малыша – следует производить уверенные действия для его защиты. Причем поручить данный вопрос нужно исключительно опытным профессиональным докторам.
    На сегодняшний день консультации личного педиатра по карману далеко не всем гражданам РФ. А отправляться по любому вопросу в поликлинику, выстаивать бесконечные очереди и подвергать малыша вероятности заразиться вирусами от других детей – тоже не вариант.
    К счастью, различные частные клиники дают оформить программу Детского Добровольного Медицинского Обслуживания (ДМО), которая помогает за незначительную сумму денег приобрести полис на годовое обслуживание у врачей.
    К сожалению, не многие люди осведомлены о подобной услуге и продолжают лечить детей народными методами, выжидают часами в очередях и отдают большие деньги за приемы частных врачей.
    А программа Добровольного Медицинского Обслуживания для детей даёт возможность:
    ” Бесплатно получить больничный лист по уходу за ребенком;
    ” Бесплатно проходить обследование у индивидуальных врачей педиатров;
    ” Бесплатно или со скидкой проходить лечебные процедуры и диагностические процедуры;
    ” Лечить чадо вовремя, качественно и без очередей.
    Чтобы ознакомиться со списком клиник и условиями оказания лечения достаточно написать в поиск Яндекса или Google ключевое выражение: “Добровольное Медицинское Обслуживание”. После этого необходимо подобрать понравившуюся клинику и оформить договор.

    34j5c6h87

  18. MashaHam

    2017-12-13 at 上午3:00

    This message is posted here using XRumer + XEvil 4.0

    XEvil 4.0 is a revolutionary application that can solve any antibot CAPTCHA’s.
    Captcha Bypass Google (ReCaptcha-1, ReCaptcha-2), Facebook, BING, Hotmail, Yahoo,
    Yandex, VKontakte, Captcha Com – and over 8.4 million other types!

    You read this – it means it works! 😉
    Details on the official website of XEvil.Net, there is a free demo version.

    Check YouTube video “XEvil ReCaptcha2”

  19. Asfalt93Vown

    2018-02-06 at 下午9:17

    ук благоустройство йошкар-ола сайт
    благоустройство придомовой территории гост
    благоустройство пушкинского района
    контракт на благоустройство образец
    благоустройство дачного

发表评论

关于我们 联系我们 8天官网

© 2018 8天在线UED版权所有

返回顶部 ↑