net编辑页面带明细表的操作方式

主表与明细表在一个页面时，明细表操作方法。

 一：明细表table位置创建

<table border="0" cellspacing="0" cellpadding="0"  width="500">
<thead>
<tr>
<th>选项</th> 
</tr>
</thead>
<tbody>
<asp:Repeater ID="rptQuestionDetail" runat="server"> 
<ItemTemplate>
<tr class="td_c">
<td>
<%#Eval("ItemName")%> 
</td> 
</tr>
</ItemTemplate> 
</asp:Repeater> 
<tr id="trFooter" style="display:none;"><td></td></tr> 
</tbody>
</table>

二：

$(function () {

//strquestiondetail 后台定义JSON变量。页面默认加载四条明细数据

var varquestiondetail = '<%=strquestiondetail%>';
var questiondetail = '';
if (varquestiondetail != "")
{
questiondetail = eval('('+varquestiondetail+')');
}
if (questiondetail == '' || questiondetail == null || questiondetail == undefined) {
for (var i = 0; i < 4; i++) {
AddTr("", i);
}
}
else
{
for (var i = 0; i < questiondetail.length; i++) {
AddTr(questiondetail[i], i);
}
if (questiondetail.length < 4) {
for (var j = 0; j <4 - questiondetail.length; j++) {
AddTr();
}
}
}

});

//明细表tr的添加和删除

function AddTr(model, index)
{
if (model == undefined || model == "") {
model = {
ItemName: ''
};
}
var tr_new = '<tr name="detail" style="text-align:left;" ><td><input class="input normal" type="text" value="' + model.ItemName + '" datatype="*0-100" sucmsg="" />';

if (index == undefined || index != 0) {
tr_new += '<a href="javascript:void(0);" onclick="removeTr(this);" title="删除" class="operator" style="cursor: pointer;"><i class="iconfont icon-delete"></i></a>';
}
//第一条一直为+号
else if (index == 0) {
tr_new += '<a href="javascript:void(0);" style="cursor: pointer;" class="operator" title="增加行" onclick="AddTr()"><i class="iconfont icon-close"></i></a>';
}
tr_new += '<span class="Validform_checktip"></span></td></tr>';

$("#trFooter").before(tr_new);
}
function removeTr(o) {
$(o).parent().parent().remove();
}

明细表效果如下：

3，数据提交前格式化数据

function GetDetailInfos() {
var data = [];
$('tr[name="detail"]').each(function () {
if ($(this).children().eq(0).find('input').val() != '' && $(this).children().eq(0).find('input').val() != undefined) {
var model = {
ItemName: $(this).children().eq(0).find('input').val()
}
data.push(model);
}

});
var s = JSON.stringify({ 'ListDetail': data });
$('#<%=hidValue.ClientID%>').val(s);
}

4，后台获取时反序列化JSON数据

//需要引用System.Web.Extensions程序集

List<Model.vote_item> modellist = new List<Model.vote_item>();
var data = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Model.vote>(hidValue.Value);
for (int i = 0; i < data.ListDetail.Count; i++)
{
Model.vote_item model_detail = new Model.vote_item();
model_detail.ItemName = data.ListDetail[i].ItemName;
modellist.Add(model_detail);
}
_model.ListDetail = modellist;

5，前台加载时处理

//序列化对象为json数据，很重要！
JavaScriptSerializer j = new JavaScriptSerializer();
strquestiondetail = j.Serialize(model.ListDetail);