? 近来根据项目需求，需要实现动态的根据json文本生成一个可分组的table功能，并且需要实现类似tree的展开和收缩功能， 另外附带checkboxpartial check功能。
? 查阅了不少js framework，没有比较顺手的，都需要二次开发，于是打算自己写一个简单的， 先看一个页面：
?Basic Framework: Jquery, 因为需要很多的selector操作，而jquery的$()不是盖的，而且只需要用到jquery的min js，比较轻量级。
Partial Checkbox 的实现，因为checkbox本身不支持partial check, 所以需要用图片来实现，基本原理是底层一个白色的空图片，根据点击事件来动态的更换background picture。
Json parser: 我实现的很简单，json文本中放置一个数组，里面是需要显示的对象， 利用jquery的each方法遍历文本，分析出group和group item， 调用jquery的append方法生成tr
json 文本如下：
?
var data =
{"source":
[
{
"groupName":100001,
"setpointTemplateId":2212,
"protocolName":"ComTrol 6k",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"SUCT PRES SETPT",
"energyCritical":true,
"alarmSetpoint":false,
"checkOveride":false,
"isChecked":true,
"checkWaringMsg":"function(isChecked){if(isChecked){alert('If you unchecked this point, you can not calculate the benefit.');}}"
},
{
"groupName":100001,
"setpointTemplateId":2213,
"protocolName":"ComTrol 6k",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"Lead Float Ckt",
"energyCritical":false,
"alarmSetpoint":true,
"checkOveride":false,
"isChecked":false,
"checkWaringMsg":''
},
{
"groupName":100001,
"setpointTemplateId":2214,
"protocolName":"ComTrol 6k",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"FLOAT TEMP",
"energyCritical":true,
"alarmSetpoint":false,
"checkOveride":false,
"isChecked":false,
"checkWaringMsg":''
},
{
"groupName":100002,
"setpointTemplateId":1000,
"protocolName":"E2",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"CONTROL TEMP",
"energyCritical":false,
"alarmSetpoint":true,
"checkOveride":false,
"isChecked":false,
"checkWaringMsg":''
},
{
"groupName":100002,
"setpointTemplateId":1001,
"protocolName":"E2",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"FLOAT TEMP",
"energyCritical":true,
"alarmSetpoint":false,
"checkOveride":false,
"isChecked":false,
"checkWaringMsg":''
},
{
"groupName":100002,
"setpointTemplateId":1002,
"protocolName":"E2",
"unifiedAppTypeName":"Suction Group",
"unifiedPointName":"FLOAT TEMP",
"energyCritical":false,
"alarmSetpoint":true,
"checkOveride":false,
"isChecked":false,
"checkWaringMsg":''
}
]
};
?html页面：
?
?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index_1.js"></script>
<style type="text/css">
.node-unchecked {background-image: url(unchecked.gif);}
.node-checked-partial {background-image: url(checked-partial.gif);}
.node-checked {background-image: url(checked.gif);}
.image-checkbox {border: 0 none;height: 18px;margin: 0;padding: 0;vertical-align: middle;width: 15px;background-repeat: no-repeat;}
#custom_profile_table
{
border-collapse:collapse;
}
#custom_profile_table td, #custom_profile_table th
{
border:1px solid #ADADAA;
padding:3px 3px 3px 3px;
text-align:center;
}
#custom_profile_table th
{
text-align:center;
padding-top:5px;
}
#custom_profile_table tr.alt td
{
color:#000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<td><button onClick="selectHelperHandler('SELECT_ALL_ENERGY')">Select all Energy Critical Setpoint</button></td>
<td><button onClick="selectHelperHandler('SELECT_ALL_ALARM')">Select all Alarm Setpoint</button></td>
<td><button onClick="selectHelperHandle