|zyciis| 今天看了一个ShopeEx的电子商城的测试后台，好强大啊。请问一下大家，他那个列表如何来做，谢谢

http://demo.shopex.com.cn/485/shopadmin/index.php?ctl=passport&act=login
user:admin
pass:admin进了点"商品"，就会显示商品列表
在他里面的表头的最后有一个图片点击后可以自定义他的列的输出大家说说他的设计思想是怎么样的谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个是通过ajax做的，内容都是JS填充的
其实很简单，点击保存选择结果后，JS会提交后台获取数据，然后前台绑定！
如果是我的话，会利用js 。用array 来存储点击编辑列表项里的内容，同时存储标示位，就是标示是否显示。然后根据 array 的内容生成 json 请求串 or 拼接自定义格式的字符串，向服务器发送请求 ajax只发送显示列，按照array 内的顺序然后服务器返回的内容就是 html 内的内容。列的显示是根据传送过来的字符串
我当然是知道是ajax
我是说要如何来设计
因为现在我也想做这样的后台管理
谢谢
1：首先我们点击开来的时候有字段列表，那这个字段列表是如何取出来的？保存在哪里？数据库
然后用户选中一些后再保存到哪里？数据库？因为他是第个人定制了以后再进来都会保持一样的？
也就是说
用户选择了要显示哪些字段=>然后保存到用户的自定义显示表中=》重新执行查询=》后台在输出的时候根据用户定义了显示哪些字段输出HTML？
这个问题要拆分来看的。首先，关于用户的设置肯定是根据用户的唯一标示 eg:userID 来进行持久化的存数据库也好，xml也好。就是存储在掉电可存储的位置即可。这个设计，你可以单独创建一个配置文件(配置表) 或几个配置文件，根据具体需要。当用户请求这页时，根据配置内的信息显示相应内容(table)，当用户点开“编辑列表项” 这个页面时，就相当于进入了配置信息详细页，然后进行操作当保存的时候就像之前说的那样 “生成 json 请求串 or 拼接自定义格式的字符串，向服务器发送请求 ajax ” 这个字符串的内容，就是用户的配置信息，服务器根据这个字符串的内容进行操作包括持久化用户的配置信息和返回相应 table 的 html 代码等操作。
那么我做如下设计：
1：列表中用户可以勾选的字段的由来
   因为用户是查询商品表，那么首先是由List<product>出来
   然后我创建一个DTO ProductDTO,也就是显示的所有字段
   那么在前台用户选择的地方我就可以列出来了
2：如何进行保存
   新表一个表UserViewDefine字段有
   DTOName(也就是他显示的哪个DTO的TypeName)
   Selected(是否勾选)
   SortNumber(排序号，也就是他可以拖动后进行排序)
3: 具体实现
   1:面页读取用户对应的UserViewDefine显示出那个自定义显示DIV
   2：当用户拖动和修改了显示设置的时候点应用，保存到UserViewDefine表中
   3：重新执行查询方法,我通过Ajax调用生成面页如list.aspx
   4：List.aspx根据用户查询读取表信息生成List<Product>
   5: 我将List<Product>转化为List<ProductDTO>
   6: 读取出当前用户当前DTO的用户设置，并从小到大进行排列
   7: 循环我的List<ProductDTO>进循环我的配置反射出当前配置顺序的值再根据行模版生成HTML
   8：前台显示页面接收到生成的HTML替换原来的表列信息大家看有没有问题，就是自己感觉太复杂了
复杂了点，简单的：<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Linq" %><!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 runat="server">
<title>test</title>
<link type="text/css" href="http://jqueryui.com/themes/ui-lightness/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.sortable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.dialog.js"></script>
</head>
<body>
<form id="form1" runat="server"><script type="text/javascript">
$(function() {
// 用jquery实现CheckBox1排序功能
$("#CheckBoxList1").sortable({
items: 'tr',
update: function() {
var arr = $.map($("#CheckBoxList1 label"), function(n){ return $(n).text(); });
$("#HiddenField1").val(arr.join(',')); // 拍完序后的字段名称记录在隐藏域HiddenField1中
}
});
// 用jquery实现选择字段弹出对话框
$("#ColumnsPicker").dialog({
autoOpen: false,
open: function() { $("body > div[role=dialog]").appendTo("#form1"); }
});
});
</script><a href="#" onclick="$('#ColumnsPicker').dialog('open'); return false;">选择字段</a>

<div id="ColumnsPicker" title="选择字段">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" />
<asp:HiddenField ID="HiddenField1" runat="server" />
（拖动鼠标对字段进行排序）
<asp:Button ID="Button1" runat="server" Text="确定" OnClick="Button1_Click" />
</div>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='....'
SelectCommand="select * from <table>" ></asp:SqlDataSource></form>
</body>
</html><script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) return; string[] columns, selections; // 从cookie中读取选择的字段，如果cookie不存在，就从数据库中取到字段信息
HttpCookie cookie = Request.Cookies["MyTableConfig"];
if (cookie == null)
{
// 这里是从目标表中提取字段名称，如果你希望用中文名称，可以改成专门建一个字段名称表从中读取
DataView dv = SqlDataSource1.Select(new DataSourceSelectArguments()) as DataView;
var cols = (DataColumn[])new ArrayList(dv.Table.Columns).ToArray(typeof(DataColumn));
columns = Array.ConvertAll<DataColumn, string>(cols, c => c.ColumnName);
selections = columns; // 所有的字段缺省都是选中
}
else
{
// 用cooke保存字段数据的效果是每客户端可独立持久化
// 如果你希望每个用户有独立的持久化效果，可改成UserProfile或用数据表来保存
columns = cookie["Columns"].Split(',');
selections = cookie["Selections"].Split(',');
}
UpdateTable(columns, selections);
} // 动态创建页面选择字段列表、显示表格
private void UpdateTable(string[] columns, string[] selections)
{
HiddenField1.Value = string.Join(",", columns); // 隐藏域中保存顺序排列的所有字段
CheckBoxList1.Items.Clear();
GridView1.Columns.Clear(); // 把每个字段填充到选择列表并为选中字段建立GridView显示列
foreach (string col in columns)
{
ListItem item = new ListItem(col);
item.Selected = Array.Exists(selections, sel => sel == col);
CheckBoxList1.Items.Add(item); if (item.Selected)
{
BoundField field = new BoundField();
field.DataField = field.HeaderText = field.SortExpression = col;
GridView1.Columns.Add(field);
}
}
} // 字段选择改变后，保存选择的字段信息，并重新创建页面
protected void Button1_Click(object sender, EventArgs e)
{
// 从隐藏域中提取所有顺序排列的字段
string[] columns = HiddenField1.Value.Split(',');
// 从选择列表中提取选中的字段信息
var selections = from ListItem item in CheckBoxList1.Items where item.Selected select item.Text;
// 保存到cookie中
HttpCookie cookie = new HttpCookie("MyTableConfig");
cookie["Columns"] = string.Join(",", columns);
cookie["Selections"] = string.Join(",", selections.ToArray());
Response.Cookies.Set(cookie);
// 重建页面
UpdateTable(columns, selections.ToArray());
}
</script>说明：
SqlDataSource1中的连接串和查询语句要改下，这里用的字段名字直接是数据表的字段名，如果你想用中文名字的话，应该用专门的表（或配置文件）来存放，程序要做些改动。
确实复杂了点
其实只是把要显示的字段保存为json格式或其它格式，然后列表刷新的时候根据要字段信息，显示和隐藏列。
字段信息可以保存在Cookie，Session,隐藏域，都可以的。根本没楼主想的那么复杂。
新建 DTO 大可不必，没必要过于技术化，用现有 product 实体类即可，如果没有可以考虑创建。可以就两个字段，一个是userID,另一个是勾选了的 TypeName ,
意思是只存储用户选择了的 TypeName ，存储格式是 ',' 分隔。按照排序的顺序存储用户修改的时候就修改该字段即可。4：List.aspx根据用户查询读取表信息生成List <Product>
  5: 我将List <Product>转化为List <ProductDTO>
  6: 读取出当前用户当前DTO的用户设置，并从小到大进行排列这个可以考虑合并，DTO可以省略
$("#CheckBoxList1")=》$("#<%=CheckBoxList1.ClientID%>")服务器控件不要直接写ID