您的位置：首页 > Web前端

【web前端培训之前后端的配合（上）】以我们熟悉的Datalist说明问题吧

2013-06-05 00:37 441 查看

前言

白天的时间我们一起学习了bootstrap，虽然是刚开始学习，但是我们还是不得不承认他做得好，其中就我们到底是否使用一些朋友提出了自己的想法，我在讨论之中也受益啦！

所以感谢各位的留言，我们不管用不用，还是得学习的，所以后面我们应该还会继续一起学习bootstrap。

好了，进入今天的正题吧，我这边前端培训的时间被再次压缩了，压缩到只有6天啦，我是这么想的：

第一天介绍CSS

第二天介绍JS

第三天介绍jquery

第四天介绍jquery easyui

第五天介绍ajax，并逐步将之前的成果形成最后的实例

第六天便直接进行实例讲解，也就是今天的内容

因为我们的后端同事是搞.net的，所以我这里搬出了大家都比较熟悉的datalist作为切入点，然后逐步讲解我们前后端如何配合以及为什么不使用服务器控件。

我这里是边学习边写的，最后肯定有很多没考虑到，各位要提出来哟！

Datalist·我是标题党:)

呵呵，我绝对是一个优秀的标题党，因为前端怎么会有datalist呢？所以我们这里来模拟一个看看呢（其实我原来也写过，但是那时候写的不够好）。

有一段时间没有关注过后端开发了，甚至都忘了后端代码怎么写了呢，我们看datalist事实上就是：

1 给定一个html片段，里面具有数据表字段标志

2 数据绑定，将html片段中的变量与数据表进行替换

3 结束

/// <reference path="jquery-1.7.1.min.js" />
var DataItem = function () {
this.data = null;
this.el = null;
this.id = '';
this.parentObj = null;
this.idPrefix = 'item_'; //id前缀
this.className = '';
this.event = {};
this.elementEvent = {};
};

DataItem.prototype.load = function (index, data) {
this.data = data;
var parentEl = this.parentObj.el; //注意此处是parent已经赋值
var parentId = this.parentObj.id
var id = parentId + this.idPrefix + index; //生成唯一id
this.id = id;
//注意啦，这里根据html片段开始生成最终数据了哦
var templateObj = this.templateObj; //此处的膜拜已经过处理
var tmpHtm = '';
$.each(templateObj, function (i, item) {
if (item.field) {
tmpHtm = tmpHtm + item.html + data[item.field]
} else {
tmpHtm = tmpHtm + item.html;
}
});
var el = $('<div></div>'); //形成dom
//为了避免id重复，这里对id必须进行处理，我们同时不允许为元素设置id
el.attr('id', id);
el.html(tmpHtm);
if (this.className)
this.el.attr("class", this.className);
parentEl.append(el);
};

var Datalist = function () {
this.id = new Date().getTime().toString();
this.items = []; //所具有的dataitem的项目
this.dataSource = null; //各位对他熟悉吧
this.container = $("body"); //我们的datalist的容器，没有指定的话就放在body里面
this.style = {}; //可以为其设置样式这里考虑的好像有点多了
this.attribute = {}; //为其设置属性
this.className = '';
this.itemClass = ''; //子元素的class

this.template = ''; //可以在此设置，也可以指定容器id，然后由容器寻找
};

//好了，我们第一步需要
Datalist.prototype.formatTemplate = function () {
var template = this.template;
var reg = /\{%[\w]*\%}/;
var para = reg.exec(template);
var html = template;
var templateObj = [];
while (para && para.length > 0) {
var len = para.index;
var tmp = {};
tmp.html = html.substr(0, len);
tmp.field = para[0].substr(2, para[0].length - 4);
templateObj.push(tmp);
html = html.substr(len + para[0].length);
para = reg.exec(html);
}
tmp = {};
tmp.html = html;
templateObj.push(tmp);
this.templateObj = templateObj;//注意我们的datalist多了一个东西了哦
};

Datalist.prototype.bind = function () {
//初始化属性等操作，我们暂时忽略之
//...............
this.initElement(); //初始化元素
this.formatTemplate();
var scope = this;
var itemIndex = 0;
var container = this.container;
container.append(this.el); //将datalist装入容器

$.each(this.dataSource, function (k, v) {
var item = new DataItem(); //实例化了一个item了哦
item.parentObj = scope;
item.templateObj = scope.templateObj;
item.load(itemIndex, v);
scope.items.push(item);
itemIndex++;
});
};

Datalist.prototype.initElement = function () {
var el = $('<div id="' + this.id + '"></div>');
this.el = el;
this.initAttribute();
this.initStyle();
};

Datalist.prototype.initAttribute = function () {
var scope = this;
var element = scope.el;
$.each(scope.attribute, function (key, value) {
if (typeof (value) == "string")
if (value && value.length > 0) {
element.attr(key, value);
}
});
};

Datalist.prototype.initStyle = function () {
var scope = this;
var element = this.el;
var style = this.style;
$.each(style, function (key, value) {
if (value && value.length > 0) {
element.css(key, value);
}
});
};

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/Datalist.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var _url = 'Ajax.aspx?sql=select * from bigType';
$.getJSON(_url, function (data) {
var d = new Datalist();
d.template = 'id:{%id%},title{%title%}';
d.dataSource = data;
d.bind();
});
});
</script>
</head>
<body>
</body>
</html>

别说，他还真把我们的东西读了出来呢！一个非常不好的地方就是他多了一个div并且多了一个id！！！现在我们将之拓宽一点：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.box { margin: 10px; padding: 10px; border: 1px solid gray; display: inline-block; }
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/Datalist.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var _url = 'Ajax.aspx?sql=select * from bigType';
$.getJSON(_url, function (data) {
var d = new Datalist();
d.template = 'tmp';
d.dataSource = data;
d.bind();
});
});
</script>
</head>
<body>
<textarea id="tmp">
<div class="box">
<h3>
{%title%}</h3>

<dl>
<dt>{%id%}</dt>
<dd>{%title%}
</dd>
</dl>
</div>
</textarea>
</body>
</html>

我们看见我们将模板写在了文本域里面（这样可以避免id重复神马的带来的不方便）

结语

好吧，今天已经很晚啦，我们明天继续，结束这一章的东西，明天会解决以下问题（或者说尝试解决。。。）

1 datalist的嵌套

2 datalist的事件绑定

3 尝试减少多余的div

4 后端配合之拖动排序

5 后端配合之分屏

6 后端配合之移动

......

好啦好啦，我们睡觉吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航