EasyUI Forum
May 03, 2024, 03:22:52 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Poll
Question: Propertygrid can't display group when apply method appendRow to output a propertygrid.
appendRow method don't work. - 0 (0%)
"showGroup:true" don't work too. - 0 (0%)
Total Voters: 0

Pages: [1]
  Print  
Author Topic: Propertygrid can't display group when apply method appendRow to output a propert  (Read 21163 times)
java
Newbie
*
Posts: 4


View Profile
« on: August 13, 2012, 09:36:35 PM »

BUG: Propertygrid can't display group when apply method appendRow to output a propertygrid.

Please copy the following code, save as html file and open it in chrome to show this bug.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> Propertygrid can't display group when method appendRow is executed. </title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
 </head>

<body>
<div class="wrap">
<div class="view-text"><table id="pg" class="easyui-propertygrid" style="width:400px;" data-options="showGroup:true"></table></div>
<div class="view-bar">
<a href="#" class="easyui-linkbutton" onclick="showGroup()">ShowGroup</a>
<a href="#" class="easyui-linkbutton" onclick="hideGroup()">HideGroup</a>
<a href="#" class="easyui-linkbutton" onclick="hideHeader()">HideHeader</a>
</div>
</div>
<script type="text/javascript"><!--//<![CDATA[
$(function() {
var model = {
active_code: "",
add_date: null,
addr: "",
birthday: {
date: 8,
day: 3,
hours: 0,
minutes: 0,
month: 7,
seconds: 0,
time: 1344355200000,
timezoneOffset: -480,
year: 112
},
email: "",
id: 50,
is_active: 0,
is_del: 0,
last_login_date: null,
last_login_ip: "",
login_count: 0,
mobile: "",
msn: "",
order: "asc",
p_index: 0,
page: 1,
param: { },
pass_word: "12345678",
pks: [ ],
qq: "",
queryString: "",
real_name: "",
row: {
count: 0,
first: 0,
offset: 0,
order: "",
sort: ""
},
rows: 10,
sex: 0,
sort: "",
tel: "",
token: "",
user_id: 8,
user_name: "笑的自然"
};

var rows = [
{"field":"user_id","name":"用户ID","group":"基础信息"},  
{"field":"user_name","name":"用户名","group":"登录信息"},
{"field":"pass_word","name":"密码","group":"登录信息"},
{"field":"real_name","name":"姓名","group":"用户资料"},
{"field":"birthday","name":"生日","group":"用户资料","pattern":"yyyy-MM-dd"}
];

for (var i = 0; i < rows.length; i++) {
var row = rows[i];

row.value = model[row.field];
if (!row.value) row.value = '<span style="color:#F00;">未填写</span>';
if (typeof row.value == 'object' && row.value.time) row.value = new Date(row.value.time).format(row.pattern);

$('#pg').propertygrid('appendRow', row);
}

});

function showGroup(){
$('#pg').propertygrid({
showGroup:true
});
}

function hideGroup(){
$('#pg').propertygrid({
showGroup:false
});
}

function hideHeader(){
$('#pg').propertygrid({
showHeader:false
});
}

String.prototype.repeat = function(count, seperator) {  
    seperator = seperator || '';  
    var a = new Array(count);  
    for (var i = 0; i < count; i++){  
        a[i] = this;  
    }  
    return a.join(seperator);  
};

/**
字母  日期或时间元素  表示  示例  
G  Era 标志符  Text  AD  
y  年  Year  1996; 96  
M  年中的月份  Month  July; Jul; 07  
w  年中的周数  Number  27  
W  月份中的周数  Number  2  
D  年中的天数  Number  189  
d  月份中的天数  Number  10  
F  月份中的星期  Number  2  
E  星期中的天数  Text  Tuesday; Tue  
a  Am/pm 标记  Text  PM  
H  一天中的小时数(0-23)  Number  0  
k  一天中的小时数(1-24)  Number  24  
K  am/pm 中的小时数(0-11)  Number  0  
h  am/pm 中的小时数(1-12)  Number  12  
m  小时中的分钟数  Number  30  
s  分钟中的秒数  Number  55  
S  毫秒数  Number  978  
z  时区  General time zone  Pacific Standard Time; PST; GMT-08:00  
Z  时区  RFC 822 time zone  -0800
*/
Date.prototype.format = function(style) {  
    var o = {  
        "y{4}|y{2}" : this.getFullYear(), //year  
        "M{1,2}" : this.getMonth() + 1, //month  
        "d{1,2}" : this.getDate(),      //day  
        "H{1,2}" : this.getHours(),     //hour  
        "h{1,2}" : this.getHours()  % 12,  //hour  
        "m{1,2}" : this.getMinutes(),   //minute  
        "s{1,2}" : this.getSeconds(),   //second  
        "E" : this.getDay(),   //day in week  
        "q" : Math.floor((this.getMonth() + 3) / 3),  //quarter  
        "S{3}|S{1}"  : this.getMilliseconds() //millisecond  
    };
    for(var k in o ){  
        style = style.replace(new RegExp("("+ k +")"), function(m){  
            return ("0".repeat(m.length) + o[k]).substr(("" + o[k]).length);  
        });
    }
    return style;  
};
//]]>--></script>
 </body>
</html>

Please fix it as soon as possible.

Thank you.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 14, 2012, 12:07:19 AM »

The propertygrid use the groupview to display data, in which the 'appendRow' method has not been overridden. Calling 'appendRow' method to append new row is invalid.
To solve your issue, try running the following code:
Code:
for (var i = 0; i < rows.length; i++) {
var row = rows[i];

row.value = model[row.field];
if (!row.value) row.value = '<span style="color:#F00;">未填写</span>';
if (typeof row.value == 'object' && row.value.time) row.value = new Date(row.value.time).format(row.pattern);

//$('#pg').propertygrid('appendRow', row);
}
$('#pg').propertygrid('loadData',rows);
//...
Logged
java
Newbie
*
Posts: 4


View Profile
« Reply #2 on: August 14, 2012, 08:55:10 PM »

Thank you...
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!