Title: Propertygrid can't display group when apply method appendRow to output a propert
Post by: java 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. <!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.
Title: Re: Propertygrid can't display group when apply method appendRow to output a propert
Post by: stworthy 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: 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);
//...
Title: Re: Propertygrid can't display group when apply method appendRow to output a propert
Post by: java on August 14, 2012, 08:55:10 PM
Thank you...
|