Access911.net   |   a9BBS   |   OTaA System  
  搜索文章:  
Access911欢迎您光临  
   主页      上传      繁體版       论坛     
设为首页  |  加入收藏   
  
你现在的位置:文章索引 -> 文章分类 -> ASP/ASP.NET  
 首页|  近日更新|  下载  |  文章索引  |  搜索|  术语|  承接工程|  
 
系统正在加载内容,请耐心等待...
 
 查询
 窗体
 报表
 
 
 VBA
 函数
 ADO/DAO/ADO.NET
 API
 ADP
 安全
 发布
 OA
 ASP/ASP.NET
 其他语言
 控件
 DELPHI
 C#/.Net
 本站
 其他
 小例程
 常用软件
 参考文档
 业主作品
 网友大作
 
 
友情链接
 access911.net
 
访问人次
 1701833
 
站长 E-Mail
 net911@sina.com
 access911@gmail.com
 
RSS 订阅

显示附加信息 >>>

EasyUI中PropertyGrid中货币如何右对齐

作者:cg1  摘自:access911.net  :cg1  更新日期:2013-3-10  浏览人次:

 

EasyUI 1.3.2
jQuery 1.9.1
里面PropertyGrid中如何根据值设置格式。


PropertyGrid 是继承 DataGrid 的,所以一般datagrid中使用的配置方法在 PropertyGrid中都可以用。

    function loadproperty(){
        var data = {"total":7,"rows":[
            {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
            {"name":"Address","value":"","group":"ID Settings","editor":"text"},
            {"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},
            {"name":"Birthday","value":"2013-1-1 12:11:11","group":"ID Settings","editor":{
                //这里使用datetimebox作为editor,默认是没有的,因此需要重新定义。
                "type":"datetimebox",
                "options":{
                    "required":false,
                    "showSeconds":true
                }
            }},
            {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
            {"name":"SSdN","value":"123","group":"ID Settings","editor":{
                "type":"numberbox",
                "options":{
                    "min":0,
                    "precision":2
                }
            }},
            {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
                "type":"validatebox",
                "options":{
                    "validType":"email"
                }
            }},
            {"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
                "type":"checkbox",
                "options":{
                    "on":true,
                    "off":false
                }
            }}
        ]};


        $("#audit").propertygrid({
            showGroup:true,
            scrollbarSize:0,
            //propertygrid 中根据数据内容更改某一行的对齐方式。这点在帮助中没有
            //rowStyler:function(index,row){
            //    if (row.name=="SSdN"){
            //        return 'text-align:right;background-color:pink;color:blue;font-weight:bold;';    
            //    }
            //},
            columns:[[
                    {field:'name',title:'名称',width:80,sortable:true},
                    {field:'value',title:'数据',width:100,resizable:false,
                        //propertygrid中根据某个值的状态,更改这一个值的右对齐方式。
                        styler: function(value,row,index){
                        if (row.name=="SSdN"){
                            return 'text-align:right;';
                        }
                    }}
                    ]]

        });
        $("#audit").propertygrid("loadData",data);
    }



另外,增加editor的方法如下:

//扩展编辑器,给propertygrid用。ptypepriceself.asp 用
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox:{
        //datetimebox就是你要自定义editor的名称
        init:function(container, options){
            var input = $('<input class="easyuidatetimebox">').appendTo(container);
            return input.datetimebox({
                formatter:function(date){
                    return new Date(date).format("yyyy-MM-dd hh:mm:ss");
                }
            });
        },
        getValue: function(target){
            return $(target).parent().find('input.combo-value').val();
        },
        setValue: function(target, value){
            $(target).datetimebox("setValue",value);
        },
        resize: function(target, width){
            var input = $(target);
            if ($.boxModel == true){
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }
});

//时间格式化
Date.prototype.format = function(format){
    // eg:format="yyyy-MM-dd hh:mm:ss";
    if(!format){
        format = "yyyy-MM-dd hh:mm:ss";
    }

    var o = {
            "M+": this.getMonth() + 1, // month
            "d+": this.getDate(), // day
            "h+": this.getHours(), // hour
            "m+": this.getMinutes(), // minute
            "s+": this.getSeconds(), // second
            "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
            "S": this.getMilliseconds()
            // millisecond
    };

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() +"").substr(4 - RegExp.$1.length));
    }

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length));
        }
    }
    return format;
};



关于propertygrid的几个功能示例:
只读,不显示编辑框
用combbox组合框编辑,并且在显示的时候也显示text,而不是value
用numberbox,可以格式化数据。
根据数值都颜色和格式进行修改。


    function loadproperty(){
        var data = {"total":7,"rows":[
            {"name":"Name","value":"Bill Smith","group":"ID Settings"},
            {"name":"Address","value":"","group":"ID Settings","editor":"text"},
            {"name":"auditname","value":"","group":"ID Settings","editor":{
                "type":"combobox",
                "options":{
                    "data":[{"value":1,"text":"一"},{"value":2,"text":"二"}],
                    "panelHeight":"auto"
                }
            }},


            {"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},
            {"name":"Birthday","value":"2013-1-1 12:11:11","group":"ID Settings","editor":{
                //这里使用datetimebox作为editor,默认是没有的,因此需要重新定义。
                "type":"datetimebox",
                "options":{
                    "required":false,
                    "showSeconds":true
                }
            }},
            {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
            {"name":"price","value":"12323423.67","group":"ID Settings","editor":{
                "type":"numberbox",
                "options":{
                    "min":0,
                    "precision":2,
                    "groupSeparator":",",
                    "decimalSeparator":".",
                    "prefix":"Y"
                }
            }},
            {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
                "type":"validatebox",
                "options":{
                    "validType":"email"
                }
            }},
            {"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
                "type":"checkbox",
                "options":{
                    "on":true,
                    "off":false
                }
            }}
]};


        $("#audit").propertygrid({
            showGroup:true,
            scrollbarSize:0,
            //propertygrid 中根据数据内容更改某一行的对齐方式。这点在帮助中没有
            //rowStyler:function(index,row){
            //    if (row.name=="price"){
            //        return 'text-align:right;background-color:pink;color:blue;font-weight:bold;';    
            //    }
            //},
            columns:[[
                    {field:'name',title:'名称',width:80,sortable:true},
                    {field:'value',title:'数据',width:100,resizable:false,
                        //propertygrid中根据某个值的状态,更改这一个值的右对齐方式。
                        styler: function(value,row,index){
                            if (row.name=="price"){
                                return 'text-align:right;';
                            }
                        },
                        formatter: function(value,row,index){
                            if (row.name=="price"){
                                return "Y " + $.number(value,2);
                            }else if(row.name=="auditname"){
                                if (value==1)
                                {
                                    return "一";
                                }else{
                                    return "二";
                                }
                            }else{
                                return value;
                            }
                        }
                    }
                    ]]

        });
        $("#audit").propertygrid("loadData",data);
    }


 

 
相关文章
     没有手动相关文章
 
评论
     查看或发表更多的评论,请单击这里。
 
 
 
 
 
   
  Access911.net   |   a9BBS   |   OTaA System   |
建站日期:2000年4月2日  |  设计施工:陈格 ( access911 & cg1 )
 Copyright © 2000 - 2003 COMET, 陈格 保留所有权利