【jquery模仿net控件】简单的dropdownlist与datalist
各位大哥晚上好，好久不见。小弟实习了三个月了，由.net转成了java，工作期间正在努力学习。
但是有一点非常痛苦，我不止一次听到一个声音，”.net真的很简单，我原来也学过。直接拖就是了......“
啊！！！感觉好没有技术含量啊！莫法，小弟技术不行，无力辩驳什么。
并且就技术层次本身来说，不论我确实还有很多路要走，就不多说了。
起因
我们最近在做一个项目，其中核心模块需要用到类似于igoogle中那种小工具的功能，当时经过众人商议，
最后决定用jquery写控件。
控件！！！好机会啊！我发现项目需要的功能和.net中的datalist真的非常像，于是很想插进去.......
但是，我那浅薄的水平，以及我那悲剧的实习生头衔，在其他同事面前确实不大说得上话。
最后眼睁睁看着别人写了1more js代码，然后让我去读。
呵呵，不是那个前辈代码写的不好，相反我在他的代码中学了很多东西，当然是带着极其抵触的情绪在努力的看！
总觉得这也不好，那也不好，甚至有时候在抠人家命名规范的问题，总是想推翻一点加上自己的思路......
说到这里，我深刻的感觉团队合作，团队交流，团队协作真的很重要！
你有一个想法，你要如何表达自己的思路，如何写出代码，如何让别人接受你的想法，接受你的代码，
甚至让别人帮助你充实你的想法，真的是一门大学问！
你若是做了一个东西，确实不错，但是你不表现的谦虚，其他同事必定不会买账，根本不会认同你的想法。
而且，一个你觉得很好的点子，在人家的分析后，肯定会发现很多问题，那就要看你如何获得人家的认同与帮助了！
项目过程
就那前辈的代码，我其实发现了一些问题，项目过程中他的代码也确实遇到了一点问题，主要原因就是代码除他之外，没人想去动。
然后站在设计模式的高度来看，他的代码可维护性，可扩展性有点问题，当然我设计模式看了一次也忘得车不多了。
最后在学习前辈的代码，再加上.net控件思路的高度，我自己花了点时间写了两个控件模拟.net中的dropdownlist与datalist。
再次交出代码，抛砖引玉，请各位大哥弄点更好的东西出来吧！！！
因为我也是才学js,代码写的不好，请各位大哥提点下吧！
Dropdownlist
一、效果图（）
因为这个控件是练手的，我需要的是datalist，所以就算起一个探索作用，没有写太多。
其功能就算想模拟.net中的控件，根据不同数据源，生成不同的代码。
最主要是想把事件控制权交出来，让使用这个控件的人不用去关注控件本身，（这也是前辈的主要问题）
二、简单代码
核心代码：
var item = function (value, text) {
this.attribute = {
id: '',
value: value ? value : '',
text: text ? text : '',
title: '',
selected: ''
};
this.htmlElement = null;
this.callBack = {
onClick: null
};
}
item.prototype.bindEvent = function () {
var sender = this;
// alert(sender.dataSource);
var element = sender.htmlElement;
if (sender.callBack.onClick) {
element.unbind("click");
element.bind("click", function () {
sender.callBack.onClick.call(sender);
});
}
}
var dropDownList = function (id) {
this.attribute = {
id: id
};
this.style = {
width: '',
height: ''
};
this.callBack = {
onSelectedChanged: null,
onClick:null
};
this.htmlElement = null;
this.items = [];
this.selectedValue = '';
this.selectedItem = {};
this.dataSourceType = '';
this.dataSource = {}; //应该支持不同数据源
this.dataTextField = '';
this.dataValueField = '';
this.dataTitleField = '';
}
dropDownList.prototype.bindEvent = function () {
var sender = this;
// alert(sender.dataSource);
var element = sender.htmlElement;
if (sender.callBack.onSelectedChanged) {
element.unbind("change");
element.bind("change", function () {
sender.callBack.onSelectedChanged.call(sender);
});
}
if (sender.callBack.onClick) {
element.unbind("click");
element.bind("click", function () {
sender.callBack.onClick.call(sender);
});
}
}
dropDownList.prototype.dataBind = function (element) {
var sender = this;
sender.htmlElement = $('<select id="' + sender["attribute"]["id"] + '"></select>');
$.each(sender.dataSource, function (itemKey, itemValue) {
// alert(itemKey + ":" + itemValue);
var _item = new item();
_item["attribute"]['value'] = itemValue[sender['dataValueField']];
_item["attribute"]['text'] = itemValue[sender['dataTextField']];
_item["attribute"]['title'] = itemValue[sender['dataTitleField']];
sender.items.push(_item);
sender.insertItem(_item);
});
//呈现前，样式加载
sender.styleLoad();
element.append(sender.htmlElement);
}
dropDownList.prototype.styleLoad = function () {
var sender = this;
var element = sender.htmlElement;
$.each(sender["style"], function (styleKey, styleValue) {
// alert(styleKey + ":" + styleValue);
if (styleValue) {
element.css(styleKey, styleValue);
}
});
}
dropDownList.prototype.insertItem = function (optionItem) {
var sender = this;
var element = sender.htmlElement;
var itemSender = optionItem;
// alert(element["id"]);
var option = $('<option></option>');
var optrinAtrribute = optionItem["attribute"];
var id = optrinAtrribute["id"];
var value = optrinAtrribute["value"];
var text = optrinAtrribute["text"];
var title = optrinAtrribute["title"];
var selected = optrinAtrribute["selected"];
if (id && id.length > 0) {
option.attr("id", id);
}
if (value && value.length > 0) {
option.attr("value", value);
}
if (title && title.length > 0) {
option.attr("title", title);
}
if (selected && selected.length > 0) {
option.attr("selected", selected);
}
if (text && text.length > 0) {
option.text(text);
}
itemSender.htmlElement = option;
element.append(option);
}
前端调用：
<!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/dropDownList.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = {};
data[i]["v"] = "value_" + i.toString();
data[i]["t"] = "text_" + i.toString();
}
var $div = $("#divwl");
var drop1 = new dropDownList("drop1");
drop1.dataSource = data;
drop1.dataValueField = "v";
drop1.dataTextField = "t";
drop1.dataTitleField = "v";
drop1.dataBind($div);
for (var i = 0; i < 3; i++) {
var v = "inertValue_" + i;
var t = "insertText_" + i;
var _item = new item(v, t);
drop1.insertItem(_item);
}
drop1.style.width = '300px';
drop1.style.height = '50px';
drop1.style.background = 'green';
drop1.styleLoad();
var funClick = function () {
var dropSender = this.htmlElement;
var selectedValue = dropSender.val()
var $div = $("#text");
$div.html(selectedValue);
};
var funChange = function () {
var dropSender = this.htmlElement;
var selectedValue = dropSender.val()
alert(selectedValue);
};
drop1.items[1].callBack.onClick = funClick;
drop1.items[1].bindEvent();
drop1.callBack.onSelectedChanged = funChange;
drop1.bindEvent();
});
</script>
</head>
<body>
<div id="divwl">
</div>
<div id="text"> </div>
</body>
</html>
Datalist
好了，开始进入本文重点，这也是项目真正需要的，这个版本没有完全完成，在得到大家意见后再改吧！
一、效果图：
所用数据源：
二、思路
原来也读过.net 控件开发一书，对控件开发知识有个大概了解，所以做起来时候还是比较顺手。
① datalist首先提供了一个公共的模板，就是itemtemplate中可以写任何代码包括数据绑定代码，
然后依次循环调用，所以我觉得这个控件需要一个模板保存类似于.net中的html代码，以及数据绑定代码。
当然，我们不可能写在js代码中，于是出现了一下模板文件：
itemTemplate.spt：
<table>
<tr>
<td>
新闻ID
</td>
<td>
{%newsId%}
</td>
</tr>
<tr >
<td >
新闻标题
</td>
<td>
{%newsName%}
</td>
</tr>
<tr >
<td>
新闻摘要
</td>
<td>
<input id="contentMore" value="详情" type="button"/>
</td>
</tr>
<tr >
<td colspan="2" style=" display:none;" class="content">
{%newsContent%}
</td>
</tr>
</table>
<hr/>
{%newsName%} 是模拟Eval("")的写法，后期作为数据绑定使用
② 然后每次循环生成具体的模板js代码如下：itemTemplate.js
/// <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.event = {
onClick: null,
onMousemove: null
};
//将要执行
// this.evetElementSource = {};
this.elementEvent = null;
};
itemTemplate.prototype.getItemElement = function (elementKey) {
var sender = this;
var id = "#" + sender.id + " " + elementKey;
var element = $(id);
return element;
}
//elementKey #id、 .className、 htmlElement
itemTemplate.prototype.bindElementEvent = function (elementKey, eventType, funcName) {
var sender = this;
var id = "#" + sender.id + " " + elementKey;
var element = $(id);
if (funcName) {
element.unbind(eventType);
element.bind(eventType, function () {
funcName.call(sender);
});
}
}
//elementKey #id、 .className、 htmlElement
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.bindEvent = function () {
var sender = this;
var element = sender.htmlElement;
var events = sender.event;
$.each(events, function (eventKey, funcName) {
// alert(funcKey + "---" + funcValue);
if (funcName) {
var _event = eventKey;
_event = _event.substring(2, _event.length);
_event = _event.toLowerCase();
element.unbind(_event);
element.bind(_event, function () {
funcName.call(sender);
});
}
});
};
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))
sender.htmlElement = element;
sender.bindEvent();
};
技术细节便不说了，其主要采用正则表达式方式替换相应内容，所以完全根据我们提供的数据源而定：
③ 外层datalist代码：dataList.js
/// <reference path="../scripts/jquery-1.4.1.js" />
/*
思考：
1 如何给数据项某个html标签添加事件
因为我们并不知道生成的dom树是什么，所以模板里面的html标签无法绑定事件，暂时只能后期绑定
*/
/* 控件生成流程
*/
var dataList = function (id, templateUrl) {
this.attribute = {
id: id
};
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.itemElementEvent = {};
// this.itemElementEvent = {
// one: {
// elementKey: "",
// eventType: "",
// funcName: null
// }
// };
this.htmlElement = null;
this.templateUrl = templateUrl ? templateUrl : ""; //提供项目模板地址
this.htmlTemplateText = "";
this.items = [];
this.dataSource = {}; //应该支持不同数据源
};
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>");
sender.htmlElement = htmlElement;
};
dataList.prototype.dataBind = function (element) {
this.init();
var sender = this;
var templateText = sender.htmlTemplateText;
var itemEvent = sender.itemEvent;
var itemElementEvents = sender.itemElementEvent;
//需要替换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;
//传递父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.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);
};
//dataList.prototype.bindItemEvent = function (domItem) {
// var sender = this;
// var element = sender.htmlElement;
// element.append(domItem);
//};
//dataList.prototype.bindEvent = function () {
// var sender = this;
// var element = sender.htmlElement;
// var events = sender["event"];
// $.each(events, function (eventKey, funcName) {
// // alert(funcKey + "---" + funcValue);
// if (funcName) {
// var _event = eventKey;
// _event = _event.substring(2, _event.length);
// _event = _event.toLowerCase();
// element.unbind(_event);
// element.bind(_event, function () {
// funcName.call(sender);
// });
// }
// });
//};
//异步获取文件
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;
}
③ 前台调用界面代码：
<!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 dataSource = {};
$.ajax({
type: "post",
url: "Ajax.aspx",
type: "json",
async: false,
success: function (data) {
dataSource = data;
}
});
var $divHtml = $("#html");
var $div = $("#wl");
var $div1 = $("#wl1");
var itemElementEvents = {
contentClick: {
elementKey: "#contentMore",
eventType: "click",
funcName: contentMoreClick
}
};
var list = new dataList("divwl");
list.itemEvent.onMousemove = itemmousemove;
list.itemEvent.onMouseout = itemmouseout;
list.itemElementEvent = itemElementEvents;
list.style.width = "700px";
list.dataSource = dataSource;
list.dataBind($div);
function contentMoreClick() {
var sender = this;
var newsContent = sender.getItemElement(".content");
var contentMore = sender.getItemElement("#contentMore");
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="html" style="display: block">
</div>
<div id="wl">
</div>
<div id="wl1">
</div>
</body>
</html>
大概代码如上，看一下调用界面基本知道如何使用的。
在此我有个没有解决的问题，请各位大哥帮下忙：
除模板之中的html dom 结构没有前期事件绑定外，其他生成的dom都是在展现前便绑定事件：
//呈现前，样式加载
sender.styleLoad();
element.append(sender.htmlElement);
//模板中的html标签的事件绑定
var items = sender.items;
$.each(items, function (i, item) {
item.bindAllElementEvent();
});
其实这个代码最先是写在itemTemplate.js文件中的，在没有将dom append到页面中，但是因为dom结构没有生成，我无法通过除以上的方法找到
对应html标签，所有无法做事件绑定，这里把我弄模糊了。各位大哥有兴趣看了代码便和我说说吧，代码会跟进。
今天又更新了一点代码，有点变化，现在先弄上datalist嵌套的用法，具体的代码后面点看有没有需要弄出来
效果：其实就是新闻类型嵌套一个新闻列表
<!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 5 * 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
}
};
listItem.itemElementEvent = itemElementEvents;
listItem.dataSource = dataItems;
listItem.dataBind($div);
function elementDatabind() {
var sender = this;
var $itemId = sender.getItemElement("#itemId");
var $itemNews = sender.getItemElement("#itemNews");
var listItemNews = new dataList("news", "itemTemplate/itemTemplate.spt");
var _itemElementEvents = {
contentClick: {
elementKey: "#contentMore",
eventType: "click",
funcName: contentMoreClick
}
};
var id = $itemId.html();
var s = $itemNews.html();
var dataNews = {};
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select top 3 newsId,newsName, newsContent from news where itemId='" + id + "' ",
type: "json",
async: false,
success: function (data) {
dataNews = data;
}
});
listItemNews.itemEvent.onMousemove = itemmousemove;
listItemNews.itemEvent.onMouseout = itemmouseout;
listItemNews.itemElementEvent = _itemElementEvents;
listItemNews.dataSource = dataNews;
listItemNews.dataBind($itemNews);
}
function contentMoreClick() {
var sender = this;
var newsContent = sender.getItemElement(".content");
var contentMore = sender.getItemElement("#contentMore");
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>
</body>
</html>
等以后代码完善了，我在整理发出吧。
