快速数据列表展示(编辑中)

页面数据和控件的自动交换机制中,我们通过PageX实现了一种快速的控件和数据交换机制,能够方便快捷地完成数据库中的数据记录的管理。一般情况下,在进入这个编辑页面之前,还应该有另外一个页面,可以一次展示多条数据记录的信息。在这个数据的列表界面中,可以进行各种操作,如删除、跳转、编辑等。这个数据列表页面不仅可以按照数据库的分类展示数据,也可以根据需要进行展示,如按指定字段排序、根据查询结果展示、分页展示等。

用什么来展示数据列表?

由于数据列表页面在数据管理中十分常用,因此,在微软的开发工具的发展历史中,一直都有相关的控件。从早期的DataGrid、DataList控件,到C#中的DataGridView,都试图提供给用户一个方便快捷的解决方案。但从实际使用的角度来看,效果并不理想。特别是在Web应用程序的开发中,使用这类现成的控件,达到初步的演示效果固然简单。但是一旦进一步深入,遇到一些实际中复杂的需求,开发的复杂度就变得直线上升了,有时甚至根本无法实现。

经过多次碰壁之后,对于数据列表页面的开发,逐步形成一套不依赖各种现成的控件,而以HTML代码为核心的解决方式。经过多次的实际项目的考验,较好地完成了需求。使用HTML代码展示数据,有以下优势:

1、HTML代码稳定。在各种浏览器下都能正常工作;

2、可控性强。数据列表页面的所有HTML输出,都是编码实现的。因此,对于任何的需求和修改,都相当容易实现。

实现中,不仅要控制输出数据列表的HTML代码,同时还必须要考虑其他因素,如分页、参数传递、查询、页面回调等。从某种意义上来说,这种做法算是一种“重新制造轮子”的行为。但是好处在于,只要了解所有这些是如何实现和工作的,那么,我们对于页面的掌控的程度可以达到一个新的高度。在实际的应用中,配合JQuery、CSS样式表和Ajax,可以发挥强大的威力,达到“无所不能”的境界。

表格还是列表?

输出数据库中数据列表,实际上就是以格式化的方法,把一个多行多列的数据展示出来。可以选择的方案,可以用列表UL或者表格Table。以当前流行的DIV+CSS而言,似乎用UL来展示数据更加符合规范。但在实际的应用中,列表还是有很多不理想的地方:

1、要求较多。用UL展示数据,直接写出的HTML代码,不加任何样式描述的话,列表的数据就显得混乱。因此,必须要有相应的CSS来配套。

2、多行多列的样式代码较复杂。行高度、各列的宽度、对齐等都需要控制管理,特定条件下,还可能遇到错行的情况。

下面,我们不妨按照上述的构造思路构造一个数据列表,使用的范例数据库中book表数据如下:

在页面中放置一个待替换变量strContent,将构造好的HTML代码放置到该变量中:


<body>
<form id="form1" runat="server">
<div>
<%=strContent %>
</div>
</form>
</body>

在后台的代码中进行处理,获取数据,构造列表HTML代码,处理代码如下:


protected string strContent;
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = AccessDB.GetData("select top 5 * from book");
strContent += "<UL>";
for(int i=0;i<dt.Rows.Count;i++)
{
strContent += "<LI><SPAN>" + dt.Rows[i]["书名"].ToString() + "</SPAN><SPAN>" + dt.Rows[i]["出版单位"].ToString() + "</SPAN></LI>";
}
strContent += "</UL>";
}

输出的结果中,没有格式控制的情况下,效果就不好看:

相比之下,表格就显得更加“皮实”一些:

  1. 只要表格的HTML代码出来,即使不要CSS,展示出的效果就大致差不多了;

  2. 永远不会错行;

  3. 各种浏览器对于表格的分歧较小,兼容性的压力更小一些

对上例,只要修改一下,改为按照Table输出,如下:


strContent += "<Table>";
for(int i=0;i<dt.Rows.Count;i++)
{
strContent += "<TR><TD>" + dt.Rows[i]["书名"].ToString() + "</TD><TD>" + dt.Rows[i]["出版单位"].ToString() + "</TD></TD>";
}
strContent += "</Table>";

结果就大不一样,如下:

综合起来,对于数据列表页面的展示,以表格的形式来展示,在稳定性和通用性方面,能够更好一些。

表头

上面的表格的格式和美观度,暂时不用考虑,对于表格的样式可以通过CSS统一控制,当前主要把表格中的重要构成进行分析。首先要考虑的,就是表头。本着最简单的原则,表头可以从DataTable中获取,如dt.Columns[i].ColumnName就可以返回dt的第i列的表名。因此,可以构造表头如下:


DataTable dt = AccessDB.GetData("select top 5 * from book");
strContent += "<Table border=1>";
strContent += "<TR>"; //表头行
for (int i = 0; i < dt.Columns.Count; i++)
{
strContent += "<TD>"+dt.Columns[i].ColumnName+"</TD>";
}
strContent += "</TR>";
for(int i=0;i<dt.Rows.Count;i++)
{
strContent += "<TR>";
for (int j = 0; j < dt.Columns.Count; j++) //逐列处理
{
strContent += "<TD>" + dt.Rows[i][j].ToString() + "</TD>";
}
strContent += "</TR>";
}
strContent += "</Table>";

上述代码中,作了更加通用化的处理,不再指定特定的列名,而是对dt的所有列进行显示。显示效果如下:

作为数据管理的界面,对数据的控制是必不可少的,用到最多的,是删除和编辑,所以需要加入这两个控制列代码,如下:

控制列的处理方法是:在通过URL提交后,进行解析和处理,对于删除控制列,在本页处理即可。对于编辑控制,需要跳转到编辑页面,以ID作为参数。

跳转链接

对于数据管理来说,跳转链接是很常见的。单击某行数据,直接跳转到前台页面,既方便使用,也符合用户的预期。

要为表格中某行设定跳转链接,要指定:

1、哪一列需要跳转

2、跳转的链接的构成

对于第二点,由于跳转连接中需要指定ID,所以还需要定制,指定ID列和替换模式。

跳转连接也可以进行一些扩展:

1、加入_blank

2、取消任意跳转

时间: 2024-08-28 08:05:29

快速数据列表展示(编辑中)的相关文章

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

knockoutjs中使用mapping插件绑定数据列表

使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的JS对象转成 ko 中的 viewModel ,并使用ko.applyBindings() 激活Knockout 3.下面这几行代码是写在ajax success回调函数内的. 即:使用result.Data来更新viewModel,在这里实际上就是更新的users数组,更新过程中按mapping中的规则为数

python基础一 -------如何在列表字典集合中根据条件筛选数据

如何在列表字典集合中根据条件筛选数据 一:列表 先随机生成一个列表,过滤掉负数 1,普通for循环迭代判断 2,filter()函数判断,filter(函数,list|tuple|string) 1 filter(lambda x:x>0,data) 3,列表推倒式 4,效率对比:还是列表推导式稍高 二:字典 1,跟列表类似,推导式 先生成随机的字典(key从1-20) 过滤掉value是负数的值 三:集合 随机生成10个元素的集合 过滤掉小于0的元素,跟字典类似

AsyncTask异步;ListView列表展示数据

AsyncTask异步ListView列表展示数据 libs文件夹下加入jar包(导包): gson ======================================= 添加权限: 网络请求权限:INTERNET<uses-permission android:name="android.permission.INTERNET"/>网络判断权限:ACCESS_NETWORK_STATE<uses-permission android:name="

使用jquery中$.each()方法来循环一个数据列表

定义和用法 jQuery.each() 函数用于遍历指定的对象和数组. 语法 $.each( object, callback ) 参数 描述 object Object类型 指定需要遍历的对象或数组. callback Function类型 指定的用于循环执行的函数. 通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环,简单方便,下面就是我写的一个案例: 当然这个这个数组对象是我自己模拟的,实际工作中我们只需要根据后台给的接口来进行操作. html: <div clas

mysql中把selct中的数据列表转换成逗号分隔的字符串

登录mysql,在test数据库中建立一个表: CREATE TABLE `shoufei` ( `id` int(11) NOT NULL AUTO_INCREMENT, `shijian` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `xiangmu` varchar(20) NOT NULL, `jiage` float NOT NULL, `shuliang` int(11) NOT NULL, `jine` float DEFAULT N

Apple Swift 中文教程 快速参考 基本语法 更新中...

总的来说,语法有java的味道,也有python的味道,还有swift自己的味道. 有些语法还是挺不伦不类的,不太好理解,即使你有几年的java或python经验,也不见得有些语法你能很轻松的看明白. 有些语法特性很好,很个性,但有些语法个人感觉乱,特性多,注意点多,还不太好理解. 慢慢学习吧... ================================================================= 值类型 Int Double Bool String 用双引号"&

Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件

原文:Android项目实战(十六):QQ空间实现(一)-- 展示说说中的评论内容并有相应点击事件 大家都玩QQ空间客户端,对于每一个说说,我们都可以评论,那么,对于某一条评论: 白雪公主 回复 小矮人 : 你们好啊~ 我们来分析一下: 1.QQ空间允许我们 点击 回复人和被回复人的名字就可以进入对于用户的个人主页(即点击文字“白雪公主”/“小矮人”,就可以进入到这俩用户相应个人主页) 2.点击 回复的文字,就可以对回复人进行回复(即点击评论中回复的内容“你们好啊~”,便对弹出一个编辑框对回复人

Django实战1-权限管理功能实现-07:组织架构列表展示

1 组织架构列表实现 我们需要在项目中可以查看所有组织建构的数据,数据以列表的形式在页面上展示,效果如下: 1.1 组织架构列表视图 打开sandboxMP/apps/system/views_structure.py, 添加列表视图: class StructureListView(LoginRequiredMixin, View): def get(self, request): fields = ['id', 'name', 'type', 'parent__name'] ret = di