效果图：
js模板：
<script id="Countersign_tpl" type="text/template">
<tr>
{@each list as it,index}
{@if index!==0&&index%5===4}
<td style="">
<input id="${it.UserID}" value="${it.UserID}" type="checkbox" name="${it.UserID}">
<label for="${it.UserID}">${it.PersonName}</label>
</td>
</tr>
<tr>
{@else}
<td style="">
<input id="${it.UserID}" type="checkbox" name="${it.UserID}">
<label for="${it.UserID}">${it.PersonName}</label>
</td>
{@/if}
{@/each}
</tr>
</script>
页面html标签：
<table class="font04" border="0">
<tbody id="Xyhq"></tbody>
</table>
js代码：
第一步：请求数据并渲染模板：
$.ajax({
type: 'get',
async:false,
url: "../../Ashx/GetMeeting.ashx?time="+new Date(),
//data: { pageSize: Pagination.pageSize, pageIndex: Pagination.pageIndex },
success: function (result) {
var data = JSON.parse(result);//eval（"(" + result + ")");
//需要会签渲染
templateMng.renderCountersign($("#Xyhq"), data.Xyhq);
}
})
var templateMng = {
Countersign_tpl: document.getElementById('Countersign_tpl').innerHTML
renderCountersign: function (contain, data) {//需要会签
var list = { list: data };
var html = juicer(templateMng.Countersign_tpl, list);
contain.html(html);
//如果需要加载已选中的人员
if (dispathid || CachetApplyID) {
if (!CachetApplyID) {
$("#btnTempSave").css("display", "none");//保存按钮隐藏
}
//选中已选中的人员
if (approve1&&approve1.length > 0) {
$("#CheckBox_Countersign").attr("checked", true);
var userlist = approve1.split(',');
for (var i = 0; i < userlist.length; i++) {
var id = "#" + userlist[i];
$(id).attr("checked", true);
}
$("#CachetApply_RoleUserCheckBoxList").css("display", "block");
}
}
}
}
生成的html:
<table class="font04" border="0">
<tbody id="Xyhq">
<tr>
<td style="background-color: rgb(241, 245, 250);">
<input id="1a9d1026-8f0b-4840-a260-dec90296e442" type="checkbox" name="1a9d1026-8f0b-4840-a260-dec90296e442">
<label for="1a9d1026-8f0b-4840-a260-dec90296e442">古学进</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="f148def4-a6c1-4b86-8174-866af9599341" type="checkbox" name="f148def4-a6c1-4b86-8174-866af9599341">
<label for="f148def4-a6c1-4b86-8174-866af9599341">赵彤</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="d471cbc1-cf50-498a-be8a-9bc26d14b248" type="checkbox" name="d471cbc1-cf50-498a-be8a-9bc26d14b248">
<label for="d471cbc1-cf50-498a-be8a-9bc26d14b248">刘顺春</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="6f08a457-9efb-402e-b521-edaed55c6e0d" type="checkbox" name="6f08a457-9efb-402e-b521-edaed55c6e0d">
<label for="6f08a457-9efb-402e-b521-edaed55c6e0d">杨桦</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="4c41c463-961f-4af0-976b-6371eb10ea17" value="4c41c463-961f-4af0-976b-6371eb10ea17" type="checkbox" name="4c41c463-961f-4af0-976b-6371eb10ea17">
<label for="4c41c463-961f-4af0-976b-6371eb10ea17">任勇</label>
</td>
</tr>
<tr>
<td style="background-color: rgb(241, 245, 250);">
<input id="da203cd1-a0c9-43ac-8f5c-a42aed375d48" type="checkbox" name="da203cd1-a0c9-43ac-8f5c-a42aed375d48">
<label for="da203cd1-a0c9-43ac-8f5c-a42aed375d48">彭双伟</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="895f89fa-8928-4ee0-8fee-c4318820fe80" type="checkbox" name="895f89fa-8928-4ee0-8fee-c4318820fe80">
<label for="895f89fa-8928-4ee0-8fee-c4318820fe80">卢山</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="39d5e514-5a6a-44c8-81f2-26bfefe2cde9" type="checkbox" name="39d5e514-5a6a-44c8-81f2-26bfefe2cde9">
<label for="39d5e514-5a6a-44c8-81f2-26bfefe2cde9">寇廷佳</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="792010eb-fcd3-4949-8f97-67e4be5a6143" type="checkbox" name="792010eb-fcd3-4949-8f97-67e4be5a6143">
<label for="792010eb-fcd3-4949-8f97-67e4be5a6143">詹峰</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="1cb282b7-75e0-404e-8835-032fe7a2b5d4" value="1cb282b7-75e0-404e-8835-032fe7a2b5d4" type="checkbox" name="1cb282b7-75e0-404e-8835-032fe7a2b5d4">
<label for="1cb282b7-75e0-404e-8835-032fe7a2b5d4">李先奇</label>
</td>
</tr>
<tr>
<td style="background-color: rgb(241, 245, 250);">
<input id="31d9d993-afd0-4e40-a6e9-493a0a0673a3" type="checkbox" name="31d9d993-afd0-4e40-a6e9-493a0a0673a3">
<label for="31d9d993-afd0-4e40-a6e9-493a0a0673a3">王冬梅</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="115a386f-83e0-4d7d-a928-84543bc2fc31" type="checkbox" name="115a386f-83e0-4d7d-a928-84543bc2fc31">
<label for="115a386f-83e0-4d7d-a928-84543bc2fc31">高允升</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="352ea90d-0d96-49d0-b17c-0e034bc6803e" type="checkbox" name="352ea90d-0d96-49d0-b17c-0e034bc6803e">
<label for="352ea90d-0d96-49d0-b17c-0e034bc6803e">冉卫东</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="df24438c-dc5f-4bbe-9166-cf88265de067" type="checkbox" name="df24438c-dc5f-4bbe-9166-cf88265de067">
<label for="df24438c-dc5f-4bbe-9166-cf88265de067">靖小伟</label>
</td>
<td style="background-color: rgb(241, 245, 250);">
<input id="497f9340-518a-4d32-a2ab-01f97ff3ee6a" value="497f9340-518a-4d32-a2ab-01f97ff3ee6a" type="checkbox" name="497f9340-518a-4d32-a2ab-01f97ff3ee6a">
<label for="497f9340-518a-4d32-a2ab-01f97ff3ee6a">王文革</label>
</td>
</tr>
<tr>
<td style="background-color: rgb(241, 245, 250);">
<input id="b64a4ea9-972e-4252-bb79-62bd35d62d57" type="checkbox" name="b64a4ea9-972e-4252-bb79-62bd35d62d57">
<label for="b64a4ea9-972e-4252-bb79-62bd35d62d57">系统管理员</label>
</td>
</tr>
</tbody>
</table>
相关操作：
//需要会签 提交选中的数据
if ($("#CheckBox_Countersign").attr("checked") != false) {
var checkedInput = $("#Xyhq input[type='checkbox']:checked");
var UserIDList = [];
for (var i = 0; i < checkedInput.length; i++) {
UserIDList.push($(checkedInput[i]).attr("name"));
}
if (UserIDList.length > 0) {
var WorkFlowData = {};
WorkFlowData.RoleID = ConstSystemRoleId.HeadquartersDefault;
WorkFlowData.UserID = UserIDList;
WorkFlowData.StepName = "会签";
WorkFlowData.StepType = "会签";
WorkFlowDataList.push(WorkFlowData);
}
CachetApplyEntity.Approver1 = UserIDList.join(",");
}
$("#CheckBox_Countersign").attr("checked", true); 设置为选中状态
$("#CheckBox_Countersign").attr("checked", false); 设置为未选中状态
$("#CheckBox_Countersign").attr("checked") != “checked” 判断选中状态：选中
$("#CheckBox_Countersign").attr("checked") ==“checked” 判断选中状态：未选中
<input id="CheckBox_Countersign" value="123" type="checkbox" name="123">
var checkedInput = $("#Xyhq input[type='checkbox']:checked"); 获取所有选中的复选框
