zoukankan      html  css  js  c++  java
  • 细说Angular ngclass

    细说Angular ng-class

    在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如: 

    function ctr($scope){
       $scope.test =“classname”;
    }
    
    <div class=”{{test}}”></div>

         这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。

    在angular中为我们提供了3种方案处理class:
    1:scope变量绑定,如上例。(不推荐使用)
    2:字符串数组形式。
    3:对象key/value处理。

    我们继续其他两种解决方案:
    1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

    function Ctr($scope) { 
        $scope.isActive = true;
    }
    
    <div ng-class="{true: 'active', false: 'inactive'}[isActive]">
    </div>

    其结果是2中组合,isActive表达式为true,则 active,负责inactive。

    2对象key/value处理主要针对复杂的class混合,其形如:

    function Ctr($scope) { 
    
    }
    
    <div ng-class {'selected': isSelected, 'car': isCar}">
    </div> 

    当 isSelected = true 则增加selected class,
    当isCar=true,则增加car class,
    所以你结果可能是4种组合。

    个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。

     


    作者:破  狼 
    出处:http://www.cnblogs.com/whitewolf/ 
    本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-博客园--破狼51CTO--破狼

    CYQ.Data V5 批量插入与批量更新示例

    最近有网友问了我 CYQ.Data 要怎么实现批量修改,于是我就花了点时间给写了以下的示例:

     
    示例为Winform应用,现实对DataGridView控件单元格的内容后,可以实现自动更新到数据库。
     
    先上最终结果图:
     
     
     

    接下上一张项目解决方案图:

     
     
     

    由于是写Demo,所以我一般都选择用文本数据库做为示例。

     
     

    我新建了一个Users.ts,内容为:

     
    ID,int;
    UserName,string;
    CreateTime,datetime;
     
     

    意思就是表名为“Users”,字段为“ID,UserName,CreateTime”。

     
    PS:文本数据库,可用CodeFirst实体类方式,也可以直接用传统枚举型方式,以前的文章都是用CodeFirst模式演示,这里就有了枚举型演示。

    对应的标准型枚举文件TableNames.cs内容为:

     
    复制代码
        /// <summary>
        /// TableNames 的摘要说明
        /// </summary>
        public enum TableNames
        {
           Users,
        }
        public enum Users
        {
            ID, UserName, CreateTime
        }
    复制代码
     
     

    由于只是示例,可以用V5自带的工具生成,也可以自己新建手写了。

     
     
     

    接下来先看一下部分代码:

     
    首先定义一个全局的MDataTable字段:
     
     public MDataTable table;
     
     

    接下来写个Load函数,页面加载时显示下数据,然后绑定到列表控件:

     
    复制代码
            private void LoadData()
            {
                using (MAction action = new MAction(TableNames.Users))
                {
                    table = action.Select();
                    table.Bind(gvUsers);
                }
            }
    复制代码
     
     

    FormLoad的代码:

     
    复制代码
            private void Form1_Load(object sender, EventArgs e)
            {
                LoadData();
                if (table.Rows.Count < 100)
                {
                    //批量添加数据。
                    //给table批量添加行。
                    MDataRow row = null;
                    for (int i = 0; i < 100; i++)
                    {
                        row = table.NewRow();
                        row.Set(Users.UserName, "User:" + DateTime.Now.Millisecond);
                        row.Set(Users.CreateTime, DateTime.Now);
                        table.Rows.Add(row);
                    }
                    //调用表的批量添加。
                    table.AcceptChanges(AcceptOp.Insert);
                    //重新绑定到控件。
                    table.Bind(gvUsers);
                }
            }
    复制代码
     
     

    先绑定数据,这样table就不为Null了,如果一开始没数据,table也是有数据结构的。

     
    判断如果数据少于100行,下面的几行代码就是批量插入了,然后重新绑定到控件。
     
     

    如何进行量更新呢?

     
    复制代码
     private void gvUsers_CellValueChanged(object sender, DataGridViewCellEventArgs e)
            {
                
                if (table.AcceptChanges(AcceptOp.Update))
                {
                    index++;
                    labTip.Text = "数据已更新到数据库..." + index;
                }
                else
                {
                    labTip.Text = "数据更新失败";
                }
            }
    复制代码
     
     

    方法很简单,只要处理单元格的列值改变状态就调用一下就可以了。

     
    当然了了,由于是批量,你也可以把代码放到一个按钮里去,通过按钮点击再去确定指更新。
     
    理论上,指量更新就到这里为止了,这里再补一点内容,就是列的中文显示:
     
    通常我们查询后,列名都是英文的,但是系统多数是显示中文的,这里给出一种解决方案:
     
            private void gvUsers_DataBindingComplete(object sender, DataGridViewBindingCompleteEventArgs e)
            {
                FieldKeyValue.FormatHeaderText(gvUsers);
            }
     
     

    我们在控件的DataBindingComplete事件里,翻译一下列头就可以了。

     
    这里我把它封装到一个FieldKeyValue类里,代码如下:
     
    复制代码
    public class FieldKeyValue
        {
            public static void FormatHeaderText(DataGridView gv)
            {
                for (int i = 0; i < gv.Columns.Count; i++)
                {
                    gv.Columns[i].HeaderText = GetName(gv.Columns[i].HeaderText);
                }

            }
            public static string GetName(string key)
            {
                return GetName(key, null);
            }
            public static string GetName(string key, string tableName)
            {
                Dictionary<string, string> dictionary = GetFieldDescriptionDictionary();
     
                if (dictionary != null)
                {
                    if (tableName != null && dictionary.ContainsKey(tableName + "_" + key))
                    {
                        return dictionary[tableName + "_" + key];
                    }
                    else if (dictionary.ContainsKey(key))
                    {
                        return dictionary[key];
                    }
                }
                return key;
            }
            private static Dictionary<string, string> _Dic = null;
            private static Dictionary<string, string> GetFieldDescriptionDictionary()
            {
                if (_Dic == null)
                {
                    _Dic = new Dictionary<string, string>();
                    #region 字典添加
     
                    _Dic.Add("ID", "编号");
                    _Dic.Add("UserName", "用户名");
                    _Dic.Add("CreateTime", "创建日期");
     
                    #endregion
                }
                return _Dic;
            }
    复制代码
     
     

    只要添加字典对应关系就可以了,由于有时候不同的表名,相同字段可能有不同的翻译,所以字典是支持:

     
     _Dic.Add("TableA_ID", "编号");
     _Dic.Add("TableB_ID", "标识");
     
     

    该类会优先判断查询“表名_字段名”,如果找不到才找“字段名”。

     
    最后提供Demo项目源码下载: CYQ.Data_V5_Test_Win.rar
     
     

    对于Winform的分页,可以下载我的Winform分页控件:C#Winform通用分页控件实战篇(提供源码下载)

  • 相关阅读:
    做淘宝直通车怎么提高宝贝的点击率?
    如何更有效的优化直通车关键词?为什么要优化?
    淘宝直通车运营的6个技巧与逻辑
    淘宝直通车推广技巧,如何做好养词及关键词出价
    淘宝直通车技巧干货大全
    直通车 直接成交笔数,间接成交笔数
    直通车关键字竞争透视
    影响淘宝综合排名的因素有哪些?
    影响淘宝排名的因素有哪些
    面试-java反射
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3092810.html
Copyright © 2011-2022 走看看