<!-- 扩展属性-->
<div tabpanel="propetytabpanel" class="form_table_input">
<table id="tablist" class="datatable" border="1" cellspacing="0" bordercolorlight="#dddddd"
bordercolordark="#ffffff" cellpadding="0" width="100%">
<tbody>
<tr>
<th width="20%">
属性名称
</th>
<th width="20%">
英文属性名称
</th>
<th width="20%">
排序
</th>
<th width="10%">
操作
</th>
</tr>
</tbody>
<tbody id="ExtendPropetyContent">
</tbody>
<tbody id="ExtendPropetyContentCcontentTemple" style="display:none;">
<tr DataId="{ID}">
<td>
{PropertyName}
</td>
<td>
{PropertyEnglishName}
</td>
<td>
<input type="text" class="Sort" value="{Sort}" />
</td>
<td>
<a href="javascript:DelExtendPropety({ID})" >删除</a>
</td>
</tr>
</tbody>
</table>
<script>
var template = JQ("#ExtendPropetyContentCcontentTemple").html();
var $content = JQ("#ExtendPropetyContent");
var ProductTypeID = JQ("#ProductTypeID").val();
var Sort = 0;
function DelExtendPropety(id) {
if (confirm('确定要永久删除该信息吗?删除后将不能被恢复!')) {
var param = "Option=delpropety&ProductTypeID=" + ProductTypeID + "&id=" + id;
var options = {
method: 'post',
parameters: param,
onComplete: function (transport) {
var retv = transport.responseText;
if (retv.indexOf("成功") > 0) {
$content.find("*[DataId=" + id + "]").remove();
} else {
alert(retv);
}
}
}
} else {
return false;
}
new Ajax.Request('product_type_edit_ajax.ashx', options);
}
function AddExtendPropety(rowdata) {
var t = template;
//自动排序
rowdata.Sort = Sort++;
for (var p in rowdata) {
var reg = new RegExp("{" + p + "}","ig"); //只有正则表达式才替换全部
t = t.replace(reg, rowdata[p]);
}
//第一个元素上绑定数据
var c = JQ(t);
var rowhtml = c.first().data(rowdata)
// .click(function () {
// alert(JQ(this).data().ID);
// });
$content.append(c);
}
//加载扩展属性
function loadExtendPropety() {
JQ.ajax({
type: "POST",
dataType: "json",
url: "product_type_edit_ajax.ashx",
data: { "ProductTypeID": ProductTypeID, "Option": "GetExtendPropety" },
success: function (data) {
for (var i = 0; i < data.length; i++) {
AddExtendPropety(data[i]);
}
}
});
}
//加载数据
loadExtendPropety();
function showFuHaoWindow() {
var returnvalue = window.showModalDialog('product_existFuHao.aspx?propertyId=' + ProductTypeID, null, 'dialogheight=600; dialogwidth=800; edge=Raised; center=Yes; resizable=Yes; status=Yes;');
for (var i = 0; i < returnvalue.length; i++) {
AddExtendPropety({ "PropertyName": returnvalue[i],"ID":0 ,"PropertyEnglishName":""});
}
}
//把系列扩展属性拼装成起来传到后台
function joinExtendProperty() {
var datas = [];
$content.children().each(function () {
var d = JQ(this).data();
d.PropertyValue = "";
d.TypeID = ProductTypeID; //这些是业务操作可根据需要修改
d.Sort = JQ(this).find("input.Sort").val(); //更新可输入项
datas.push(d);
});
var json = JQ.toJSON(datas);
json = eval(json); //这句话是toJSON返回的字符串把 " 换成 \" 了所以要转换一次
JQ("#extendpropty").val(json);
}
</script>
<br />
<a class="inputbutton_a" target="_blank" onclick="javascript:showFuHaoWindow()">添加符号属性</a>
<br />
<input type="hidden" value="" id="extendpropty" name="extendpropty" />
</div>
product_type_edit_ajax.ashx
后台代码
<%@ WebHandler Language="C#" Class="product_type_edit_ajax" %>
using System;
using System.Web;
using System.Web.SessionState;
public class product_type_edit_ajax : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
if (Request["Option"] != string.Empty )
{
string Option = context.Request.Form["Option"].Trim();
int propertyId = PageRequest.GetFormInt("ProductTypeID");
if (Option == "delpropety")
{
int id = PageRequest.GetFormInt("id");
context.Response.Write( delpropety(id, propertyId));
}
else if (Option == "GetExtendPropety")
{
context.Response.Write(GetPropertyList(propertyId));
}
context.Response.End();
return;
}
}
/// <summary>
/// 获取产品系列属性 的Html
/// </summary>
/// <returns></returns>
protected string GetPropertyList(int productTypeId)
{
//Shop.BLL.Product.ProductType bll = new Shop.BLL.Product.ProductType();
var dataPage = new List<User>(); //bll.GetProductPropertyAllByWhere(productTypeId,"1=1");
//JavaScriptSerializer类在System.Web.Extensions.dll中，注意添加这个引用
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//JSON序列化
string result = serializer.Serialize(dataPage);
return result;
//Console.WriteLine("使用JavaScriptSerializer序列化后的结果：{0},长度：{1}", result, result.Length);
//JSON反序列化
//user = serializer.Deserialize<User>(result);
//Console.WriteLine("使用JavaScriptSerializer反序列化后的结果：UserId:{0},UserName:{1},CreateDate:{2},Priority:{3}", user.UserId, user.UserName, user.CreateDate, user.Priority);
}
/// <summary>
/// 删除产品类型的属性 扩展属性(参数啥的)
/// </summary>
/// <param name="id"></param>
/// <param name="propertyId"></param>
private string delpropety(int id, int propertyId)
{/*删除操作*/
return "删除成功";
}
public bool IsReusable {
get {
return false;
}
}
}
还有一段后台保存的代码
/// <summary>
/// 保存扩展属性
/// </summary>
/// <param name="productTypeId">产品系列ID</param>
private void SaveExtendPropty(int productTypeId)
{
string json =Request["extendpropty"];
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//JSON反序列化 产品系列对应的扩展属性
var extendProperty = serializer.Deserialize<List<Model.Product.ProductTypeProperty>>(json);
if (extendProperty == null) return;
Shop.BLL.Product.ProductType bll = new Shop.BLL.Product.ProductType();
foreach (Model.Product.ProductTypeProperty extend in extendProperty)
{
if (extend.ID > 0)
{
bll.UpdateProductProperty(extend,extend.TypeID);
}
else
{
bll.AddProductProperty(extend);
}
}
//Console.WriteLine("使用JavaScriptSerializer反序列化后的结果：UserId:{0},UserName:{1},CreateDate:{2},Priority:{3}", user.UserId, user.UserName, user.CreateDate, user.Priority);
}
我这里的Jquery简写成JQ 如果你需要的话可以改成$
另外这里的JQ.toJSON()这个函数是来自与一个开源库 jquery.json-2.2.js
这个代码主要是实现,主表附带子表这种情况,
需要保存前就编辑的情况... 主表保存的时候,子表一并保存..主表不保存,子表也不保存..
一对多关系的数据编辑界面适合使用这个代码..