【jquery模仿net控件】简单的datalist控件更新，及其简单应用

接上次的帖子：/article/4683105.html

简单的更新了一下代码，主要针对datalist，这次主要贴出更新后的代码以及演示一下例子：

因为过年的关系，感觉自己很懒，贴出来算是一种自我激励吧，让自己有写下去的动力

功能说明

就数据缓存一块可能要放在最后优化

① datalist嵌套

② datalist编辑、删除按钮出现（还有问题）

③ datalist根据数据源、样式模板的不同展现方式不同

④ 各个html元素事件绑定

实例

我现在有一张新闻类型表；一张新闻表。

第一个datalist将所有类型列表展示出来，

在datalist里面嵌套一个具体新闻的datalist，现在显示三条，

然后每个新闻类型上面有个最大化，点击则实例化一个datalist，将对应新闻类型的10条新闻列出来。

具体新闻上有个还原按钮，点击则还原。

实例贴图

① datalist嵌套，新闻类型嵌套新闻













② 点击最大化按钮界面







点击最小化后便还原。

所用到的datalist模板

首页外层新闻类型datalist模板
<div>
<div id="itemId" style="display:none;">{%ItemID%}</div>
<h1>{%ItemName%}</h1>
<input  class="maxOrMinSize" type="button" value="最大化" />
</div>
<div  id="itemNews">
</div>
<hr/>

　　

首页内层datalist新闻列表模板
<div>
{%newsName%}
</div>

　　

最大化后的模板
<div>
{%newsName%}
<input  class="newsMore" value="详情" type="button"/>
</div>
<div style=" display:none;" class="newsContent">
{%newsContent%}
</div>
<hr/>

　　

datalist.js以及itemTemplate.js和Ajax后台处理程序

/// <reference path="../scripts/jquery-1.4.1.js" />

/*
思考：
1 如何给数据项某个html标签添加事件
因为我们并不知道生成的dom树是什么，所以模板里面的html标签无法绑定事件，暂时只能后期绑定

*/
/* 控件生成流程

*/

var dataList = function (id, templateUrl) {
this.attribute = {
id: id,
name: "",
title: ""
};
this.style = {
width: "",
height: ""
};
this.itemEvent = {
onClick: null,
onDblclick: null,
onKeydown: null,
onKeypress: null,
onKeyup: null,
onMousedown: null,
onMousemove: null,
onMouseout: null,
onMouseover: null,
onMouseup: null
};
this.deleteButton = {
html: null,
visible: false,
clickEvent: null
};
this.editButton = {
html: null,
visible: false,
clickEvent: null
};
this.cancelButton = {
html: null,
visible: false,
clickEvent: null
};
this.saveButton = {
html: null,
visible: false,
clickEvent: null
};

this.itemElementEvent = {};
this.className = "";
this.itemClassName = "";
this.htmlElement = null;
this.templateUrl = templateUrl ? templateUrl : ""; //提供项目模板地址
this.htmlTemplateText = "";
this.items = [];
this.dataSource = {}; //应该支持不同数据源
};

dataList.prototype.dataBind = function (element) {
this.init();
var sender = this;
sender.buttonLoad();
sender.attributeLoad();
var templateText = sender.htmlTemplateText;
var itemEvent = sender.itemEvent;
var itemElementEvents = sender.itemElementEvent;
var itemClassName = sender.itemClassName;
//需要替换itemTemplate
var itemIndex = 0;
$.each(sender.dataSource, function (dataKey, dataValue) {
var _item = new itemTemplate();
_item.parentId = sender.attribute.id;
_item.htmlTemplateText = templateText;
_item.event = itemEvent;
_item.elementEvent = itemElementEvents;
_item.className = itemClassName;
//传递父ID ,当前模板编号，源模板，当前项数据项源，事件绑定源
_item.load(itemIndex, dataValue);
var _itemElement = _item.htmlElement;
sender.items.push(_item);
sender.insertDomItem(_itemElement);
itemIndex++;
});
//呈现前，样式加载
sender.styleLoad();
element.append(sender.htmlElement);
//模板中的html标签的事件绑定
var items = sender.items;
$.each(items, function (i, item) {
item.bindAllElementEvent();
});
};

dataList.prototype.buttonLoad = function () {
var sender = this;
var htmlElement = sender.htmlElement;
var element = sender.htmlElement;
var id = sender.attribute.id;
var button = sender.deleteButton;
var buttonText = "删除";
this.buttonBind(id + "_delete", button, element, buttonText);
button = sender.editButton;
buttonText = "编辑";
this.buttonBind(id + "_edit", button, element, buttonText);
button = sender.cancelButton;
buttonText = "取消";
this.buttonBind(id + "_cancel", button, element, buttonText);
button = sender.saveButton;
buttonText = "保存";
this.buttonBind(id + "_save", button, element, buttonText);

};

dataList.prototype.buttonBind = function (id, btObj, el, buttonText) {
var sender = this;
var html = btObj.html;
var visible = btObj.visible;
var clickEvent = btObj.clickEvent;
if (visible) {
if (!html) {
html = $("<div>" + buttonText + "</div>");
}
html.attr("id", id);
el.append(html);
if (clickEvent && typeof (clickEvent) == "function") {
html.click(function () {
clickEvent.call(sender);
});
}
}
};
dataList.prototype.init = function () {
var sender = this;
var templateUrl = sender.templateUrl;
if (!templateUrl || templateUrl.length == 0)
templateUrl = "itemTemplate/itemTemplate.spt";
this.htmlTemplateText = getAjaxStr(templateUrl);
var htmlElement = $("<div id='" + sender.attribute.id + "'></div>");
if (sender.className && sender.className.length > 0)
htmlElement.attr("class", sender.className);
sender.htmlElement = htmlElement;
};

dataList.prototype.attributeLoad = function () {
var sender = this;
var element = sender.htmlElement;
$.each(sender.attribute, function (attributeKey, attributeValue) {
if (attributeKey != "id")
if (attributeValue && attributeValue.length > 0) {
element.attr(attributeKey, attributeValue);
}
});
}

dataList.prototype.styleLoad = function () {
var sender = this;
var element = sender.htmlElement;
$.each(sender.style, function (styleKey, styleValue) {
//                alert(styleKey + ":" + styleValue);
if (styleValue) {
//            alert(element);
element.css(styleKey, styleValue);
}
});
}

dataList.prototype.insertDomItem = function (domItem) {
var sender = this;
var element = sender.htmlElement;
element.append(domItem);
};

//异步获取文件
function getAjaxStr(url) {
var templateStr = "";
$.ajax({
url: url,
async: false,
dataType: "html",
success: function (result) {
templateStr = result;
if (templateStr)
return templateStr;
},
error: function (e) {
alert("模板加载错误：" + e.toString());
}
});
return templateStr;
}

　　

/// <reference path="../scripts/jquery-1.4.1.js" />

var itemTemplate = function () {
//源模板文本，现在为itemTemplate.spt
//可能是文本，可能是js文件，可能是字符串
//最终形成字符串传给htmlTemplateText
this.htmlTemplateText = "";
//最终会形成一独立html字符串，dom结构的标签
this.htmlElement = null;
this.idPrefix = "id_"; //id前缀
this.parentId = "";
this.id = "";
this.className = "";
this.event = {
onClick: null,
onDblclick: null,
onKeydown: null,
onKeypress: null,
onKeyup: null,
onMousedown: null,
onMousemove: null,
onMouseout: null,
onMouseover: null,
onMouseup: null
};
this.elementEvent = null;
};

itemTemplate.prototype.load = function (itemIndex, itemDataSource) {
var sender = this;
var id = sender.parentId + "_" + sender.idPrefix + itemIndex;
sender.id = id;
var element = $("<div id='" + id + "'></div>");
var html = "";
var _templateText = sender.htmlTemplateText;
tempHtm = _templateText;
$.each(itemDataSource, function (i, item) {
var id = item;
var regStr = "/\\{%" + i + "%\\}/g";
var reg = eval(regStr);
tempHtm = tempHtm.replace(reg, item);
});
html = tempHtm;
element.append($(html))
if (sender.className && sender.className.length > 0)
element.attr("class", sender.className);
sender.htmlElement = element;
sender.bindEvent();
};

itemTemplate.prototype.bindEvent = function () {
var sender = this;
var element = sender.htmlElement;
var events = sender.event;
$.each(events, function (eventKey, funcName) {
//        alert(funcKey + "---" + funcValue);
if (funcName && typeof (funcName) == "function") {
var _event = eventKey;
_event = _event.substring(2, _event.length);
_event = _event.toLowerCase();
element.unbind(_event);
element.bind(_event, function () {
funcName.call(sender);
});
}
});
};

itemTemplate.prototype.getItemElement = function (elementKey) {
var sender = this;
var id = "#" + sender.id + " " + elementKey;
var element = $(id);
return element;
};
itemTemplate.prototype.bindAllElementEvent = function () {
var sender = this;
var itemElementEvents = sender.elementEvent;
//    alert(element+"=="+id);
//数据项元素事件绑定
$.each(itemElementEvents, function (eventObjKey, eventObj) {
var elementKey = eventObj.elementKey;
var eventType = eventObj.eventType;
var funcName = eventObj.funcName;
sender.bindElementEvent(elementKey, eventType, funcName);
});
};
itemTemplate.prototype.bindElementEvent = function (elementKey, eventType, funcName) {
var sender = this;
var id = "#" + sender.id + " " + elementKey;
var element = $(id);
if (funcName && typeof (funcName) == "function") {
if (eventType == "ready") {
element.ready(function () {
funcName.call(sender);
});
} else {
element.unbind(eventType);
element.bind(eventType, function () {
funcName.call(sender);
});
}
}
};

　　

//ajax后台处理代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Newtonsoft.Json;

public partial class js仿net控件_02dataList_Ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataAccess db = new DataAccess();
DataTable dt = null;
string sql = "";
if (Request["sql"] != null)
{
sql = Request.QueryString["sql"].ToString();
dt = db.GetDataTable(sql);
}
string jsonText = getJson(dt);
Response.Clear();
Response.ContentType = "application/json";
Response.Write(jsonText);
Response.End();
}
}
private string getJson(DataTable dt)
{
string jsonText = JsonConvert.SerializeObject(dt);
return jsonText;
}
private string getStr(DataTable dt)
{
string json = "{";
for (int i = 0; i < dt.Rows.Count; i++)
{
json = json + "row_"+i.ToString()+":"+"{";
for (int j = 0; j < dt.Columns.Count; j++)
{
string colKey = dt.Columns[j].ColumnName;
string colValue = dt.Rows[i][j].ToString();
//colValue = colValue.Replace("\"","\\\"");
json = json + colKey + ":" + colValue + ",";
}
json = json.Substring(0, json.Length - 1);
json = json + "},";
}
json = json.Substring(0, json.Length - 1);
json = json + "}";
return json;
}
}

　　

前台调用，此处详细说明下

<!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>
<title></title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/itemTemplate.js" type="text/javascript"></script>
<script src="js/dataList.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataItems = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 3 * from Item where ItemKind=1 ",
type: "json",
async: false,
success: function (data) {
dataItems = data;
}
});
var $div = $("#wl");
var listItem = new dataList("newsItem", "itemTemplate/items.spt");
var itemElementEvents = {
loadItemNews: {
elementKey: "#itemNews",
eventType: "ready",
funcName: elementDatabind
},
newsMaxOrMinSize: {
elementKey: ".maxOrMinSize",
eventType: "click",
funcName: newsMaxOrMinSizeClick
}
};

listItem.itemElementEvent = itemElementEvents;
listItem.dataSource = dataItems;
listItem.dataBind($div);

function newsMaxOrMinSizeClick() {
var sender = this;
var $itemId = sender.getItemElement("#itemId");
var $maxNews = $("#maxNews");
var id = $itemId.html();
var dataNews = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 10  newsId,newsName, newsContent from news where itemId='" + id + "' ",
type: "json",
async: false,
success: function (data) {
dataNews = data;
}
});
var _itemElementEvents = {
contentClick: {
elementKey: ".newsMore",
eventType: "click",
funcName: maxContentMoreClick
}
};
var newsMaxList = new dataList("newsMax", "itemTemplate/itemMax.spt");
newsMaxList.deleteButton.visible = true;
newsMaxList.deleteButton.html = $("<input value='最小化' type='button'  ></a>");
newsMaxList.deleteButton.clickEvent = newsMin;

newsMaxList.editButton.visible = true;
newsMaxList.editButton.html = $("<input value='编辑' type='button'  ></a>");
newsMaxList.editButton.clickEvent = newsMin;

newsMaxList.itemEvent.onMousemove = itemmousemove;
newsMaxList.itemEvent.onMouseout = itemmouseout;
newsMaxList.itemElementEvent = _itemElementEvents;
newsMaxList.dataSource = dataNews;
newsMaxList.dataBind($maxNews);
$div.hide(1000);
$maxNews.show(1000);
}

function elementDatabind() {
var sender = this;
var $itemId = sender.getItemElement("#itemId");
var $itemNews = sender.getItemElement("#itemNews");
var id = sender.id;
var id = $itemId.html();
var s = $itemNews.html();
var dataNews = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 5  newsId,newsName, newsContent from news where itemId='" + id + "' ",
type: "json",
async: false,
success: function (data) {
dataNews = data;
}
});
var listItemNews = new dataList(id + "_news", "itemTemplate/itemTemplate.spt");
listItemNews.itemEvent.onMousemove = itemmousemove;
listItemNews.itemEvent.onMouseout = itemmouseout;
listItemNews.dataSource = dataNews;
listItemNews.dataBind($itemNews);
}
function newsMin() {
var sender = this;
var $maxNews = $("#maxNews");
$maxNews.html("");
$div.show(1000);
$maxNews.hide(1000);
}
function maxContentMoreClick() {
var sender = this;
var newsContent = sender.getItemElement(".newsContent");
var contentMore = sender.getItemElement(".newsMore");
if (newsContent.css("display") == "none") {
contentMore.attr("value", "隐藏");
newsContent.css("display", "");
} else {
contentMore.attr("value", "详情");
newsContent.css("display", "none");
}
}

function itemmousemove() {
var sender = this;
var $ee = sender.htmlElement;
$ee.css("background", "Gray");
}
function itemmouseout() {
var sender = this;
var $ee = sender.htmlElement;
$ee.css("background", "white");
}

});
</script>
</head>
<body>
<div id="wl"   >
</div>
<div id="maxNews" style=" display:none;">

</div>
</body>
</html>

　　

前台调用说明

① 获得数据源：

[{"ItemID":79,"ParentID":0,"ItemName":"学院新闻11","ItemContent":"","ItemSort":7,"ItemKind":1,"ItemUrl":"","IsTop":0,

"IsImportant":null,"IsHome":null,"NewsSort":null},{"ItemID":150,"ParentID":79,"ItemName":"学生工作","ItemContent":"",

"ItemSort":1,"ItemKind":1,"ItemUrl":"","IsTop":1,"IsImportant":null,"IsHome":1,"NewsSort":null},{"ItemID":162,"ParentID":129

,"ItemName":"常规工作","ItemContent":"","ItemSort":4,"ItemKind":1,"ItemUrl":"","IsTop":1,"IsImportant":null,"IsHome":1,"NewsSort":null}]

　　

第一个datalist的绑定与生成：

var $div = $("#wl");
var listItem = new dataList("newsItem", "itemTemplate/items.spt");
var itemElementEvents = {
loadItemNews: {
elementKey: "#itemNews",
eventType: "ready",
funcName: elementDatabind
},
newsMaxOrMinSize: {
elementKey: ".maxOrMinSize",
eventType: "click",
funcName: newsMaxOrMinSizeClick
}
};

listItem.itemElementEvent = itemElementEvents;
listItem.dataSource = dataItems;
listItem.dataBind($div);

　　

① 准备一个装datalist的容器div

② 初始化datalist为其设置id与对应模板文件地址（其实数据源与模板文件后期必须想法接受多个方案，比如xml或者数组、地址什么的）

③ 因为模板里面的元素我们无法控制，所有使用jquery的选择器进行元素选择（这个必须在该元素生成结束才能事件绑定，这个地方有问题）

注意第一个事件绑定，在这里html元素生成后，便会执行此函数，但是不知道这样写有没有问题

第二个事件便是最大化按钮点击事件

④ 然后bind结束第一个datalist生成结束

具体html代码如下：

<div id="wl">
<div id="newsItem"><div id="newsItem_id_0"><div>
<div id="itemId" style="display: none;">79</div>
<h1>学院新闻11</h1>
<input class="maxOrMinSize" value="最大化" type="button">
</div>
<div id="itemNews">
<div id="79_news"><div id="79_news_id_0"><div>
柯玲副校长率队看望慰问暑期留校学生(图)
</div></div><div id="79_news_id_1"><div>
我校承办2010年第四届未来计算论坛
</div></div><div style="background: none repeat scroll 0% 0% white;" id="79_news_id_2"><div>
暑期社会实践纪实十一（色彩爱心）
</div></div><div style="background: none repeat scroll 0% 0% white;" id="79_news_id_3"><div>
暑期社会实践纪实十（收获的季节）
</div></div><div style="background: none repeat scroll 0% 0% white;" id="79_news_id_4"><div>
暑期社会实践纪实九（“心系汶川”文艺汇演）
</div></div></div></div>
<hr></div><div id="newsItem_id_1"><div>
<div id="itemId" style="display: none;">150</div>
<h1>学生工作</h1>
<input class="maxOrMinSize" value="最大化" type="button">
</div>
<div id="itemNews">
<div id="150_news"><div id="150_news_id_0"><div>
学院院长刘先强教授在上海出席国际学术研讨会
</div></div><div id="150_news_id_1"><div>
风大哥大哥
</div></div><div id="150_news_id_2"><div>
发生的范德萨的说法
</div></div><div id="150_news_id_3"><div>
aaaa
</div></div><div id="150_news_id_4"><div>
事实上
</div></div></div></div>
<hr></div><div id="newsItem_id_2"><div>
<div id="itemId" style="display: none;">162</div>
<h1>常规工作</h1>
<input class="maxOrMinSize" value="最大化" type="button">
</div>
<div id="itemNews">
<div id="162_news"><div id="162_news_id_0"><div>
暑期社会实践纪实七（爱.延续）
</div></div><div id="162_news_id_1"><div>
学前志愿者跃动的风采
</div></div><div id="162_news_id_2"><div>
学前教育学院新生已经报到92%
</div></div><div id="162_news_id_3"><div>
学院召开新学期全院教职工大会
</div></div><div id="162_news_id_4"><div>
学院学生会分团委隆重欢迎新同学(图)
</div></div></div></div>
<hr></div></div></div>
<div id="maxNews" style=" display:none;">

</div>

　　

第二个datalist绑定

function elementDatabind() {
var sender = this;
var $itemId = sender.getItemElement("#itemId");
var $itemNews = sender.getItemElement("#itemNews");
var id = sender.id;
var id = $itemId.html();
var s = $itemNews.html();
var dataNews = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 5  newsId,newsName, newsContent from news where itemId='" + id + "' ",
type: "json",
async: false,
success: function (data) {
dataNews = data;
}
});
var listItemNews = new dataList(id + "_news", "itemTemplate/itemTemplate.spt");
listItemNews.itemEvent.onMousemove = itemmousemove;
listItemNews.itemEvent.onMouseout = itemmouseout;
listItemNews.dataSource = dataNews;
listItemNews.dataBind($itemNews);
}

　　

此处接着第一个datalist的事件绑定，绑定结束后便又初始化各个datalist，并加入对应容器中。并加上新闻列滑动事件。

注意此处id最好不要重复

点击最大化后，弹出的第三个datalist

function newsMaxOrMinSizeClick() {
var sender = this;
var $itemId = sender.getItemElement("#itemId");
var $maxNews = $("#maxNews");
var id = $itemId.html();
var dataNews = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 10  newsId,newsName, newsContent from news where itemId='" + id + "' ",
type: "json",
async: false,
success: function (data) {
dataNews = data;
}
});
var _itemElementEvents = {
contentClick: {
elementKey: ".newsMore",
eventType: "click",
funcName: maxContentMoreClick
}
};
var newsMaxList = new dataList("newsMax", "itemTemplate/itemMax.spt");
newsMaxList.deleteButton.visible = true;
newsMaxList.deleteButton.html = $("<input value='最小化' type='button'  ></a>");
newsMaxList.deleteButton.clickEvent = newsMin;

newsMaxList.editButton.visible = true;
newsMaxList.editButton.html = $("<input value='编辑' type='button'  ></a>");
newsMaxList.editButton.clickEvent = newsMin;

newsMaxList.itemEvent.onMousemove = itemmousemove;
newsMaxList.itemEvent.onMouseout = itemmouseout;
newsMaxList.itemElementEvent = _itemElementEvents;
newsMaxList.dataSource = dataNews;
newsMaxList.dataBind($maxNews);
$div.hide(1000);
$maxNews.show(1000);
}

　　

那撒，说是详细说明好像也不详细。最后效果是想以此为基础模拟igoogle的效果。可惜我不是美工，我那个悲剧的css水平确实不行。

若是有用，我以后在持续更新吧。