【jquery模仿net控件】初步GridView模型实现，及其简单应用
2024-05-20 21:32:31
最近日子不好过，主要原因是要毕业了，学校那边的毕业论文让人很头痛，就跟写八股文似的，个人非常头疼并且厌恨这种
对我无意义的东西，哎！！！体制啊，既然无法改变，何不将之做好呢！！！对，于是我还是不想写论文，拖着吧，到哪天确实
拖不下去了再说；加之公司项目也非常紧，又要写论文，虽说没写，心里就是一个不舒服啊！！！所以平时抽了点时间模拟了下
gridview，个人是菜鸟自不必多说，但是这几个月来，模拟写着写着感觉学到了不少东西哟！！！
算了....扯远了，进入正文。
前期工作
之前主要模拟了一次datalist，基本上以它为基础将igoogle功能完全实现，并且应用到项目中去了，控件不好，但也不是完全没有意义，
过程中需要类似gridview的功能，索性也就写了一下，思路与datalist差距不大。
因为马上要写论文了，而且是不完全版本这里就不画图什么的了，以后发完整版本再说吧：
效果图
简单说明
该简单应用也是我第一次做测试，有一下几个事件：
① 鼠标滑动时变色事件
② 点击大类选取小类事件
③ 点击获取时候全部获取事件
④ 当然，不能忘了行绑定事件，初期只是绑定了大类，小类根据大类id作出的加载
核心代码
<!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="../js/jquery-1.7.1.min.js" type="text/javascript"></script><script src="http://www.cnblogs.com/../scripts/jquery-1.7.1.js" type="text/javascript"></script><script src="../js/GridViewBase.js" type="text/javascript"></script><script src="../js/GridColum.js" type="text/javascript"></script><script src="../js/GridRow.js" type="text/javascript"></script><script src="../js/GridView.js" type="text/javascript"></script><script src="http://www.cnblogs.com/../scripts/jquery.cookie.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 g = new GridView();$("#www").click(function () {var rows = g.rows;var str = "";$.each(rows, function (i, row) {var checks = row.getEl("input:checkbox");checks.each(function (ii, jj) {if ($(this).attr("checked")) {str += $(this).val() + " , "}});});alert(str);});g.style.width = "500px";g.colModel = [{'th': { 'title': '大类' },'td': { 'template': '{%title%}<input value="{%id%}" type="checkbox" class="bigId" />', 'attribute': {}, 'style': {} }}, {'th': { 'title': '小类' },'td': { 'template': '<div class="type"></div>', 'attribute': {}, 'style': {} }}];g.trEvent = [{eventType: 'ready',func: function (param, e) {var scope = this;var tr = scope.el;var back = tr.css('background-color');tr.unbind('mousemove');tr.bind('mousemove', function () {tr.css('background-color', '#efefef');});tr.unbind('mouseout');tr.bind('mouseout', function () {tr.css('background-color', back);});}},{eventType: 'ready',func: function (param, e) {var scope = this;var type = scope.getEl(".type");var id = param.id;var _url = "../Ajax.aspx?sql=select * from smallType where bigTypeId='" + id + "' "$.getJSON(_url, function (data) {$.each(data, function (i, item) {var html = ' ' + item.title + '<input value="' + item.id + '" type="checkbox" class="sId" disabled="disabled" />';type.append(html);});var bigId = scope.getEl(".bigId");bigId.unbind("change");bigId.bind("change", function () {var smallTyle = scope.getEl(".sId");if (bigId.attr('checked') == 'checked') {smallTyle.attr("checked", "checked");smallTyle.removeAttr('disabled');} else {smallTyle.removeAttr('checked');smallTyle.attr('disabled', 'disabled');}});});}}];g.dataSource = data;g.render();});});</script>
</head>
<body><input type="button" value="获取" id="www" />
</body>
</html>
/// <reference path='jquery-1.7.1.min.js' />
/// <reference path='GridViewBase.js' />
/// <reference path='GridColum.js' />
/// <reference path='GridRow.js' />/*
控件生成流程：
1 先初始化表格每列的【列头】以及【body信息】，最好可指定列id，用于后期检索
2 赋予控件二维数据（但控件字段最好可支持多维数据获取）
3 初始化外围table，并赋予其属性样式,最外层结束
4 根据二维数据依次初始化每行数据，【其实可在此处初始化表头，因为若是没有数据表头将不初始化】
5 每行获得其数据源，先形成tr，然后将数据源直接赋予单元行进行初始化
6 单元化格式化单元模板，生成html标签*/var GridView = function (id) {var scope = this;this.style = {};this.attribute = {id: id && id.length > 0 ? id : new Date().getTime().toString(),className: 'wl'};this.id = this.attribute.id;this.thId = this.id + '_header';this.dataSource = [];this.header = null;this.rows = [];this.el = null;this.parentData = null;this.thEvent = [{func: function (rows, e) {var scope = this;var select = scope.getThEl('.th_select');select.unbind('click');select.bind('click', function (e) {var th_s = select.attr('checked');$.each(rows, function (i, row) {var td_select = row.getEl('.td_select');// var td_s = td_select.attr('checked');if (th_s && th_s == 'checked') {td_select.attr('checked', 'checked');} else {td_select.removeAttr('checked');}});});}}];this.trEvent = [{eventType: 'ready',func: function (param, e) {var scope = this;var tr = scope.el;var back = tr.css('background-color');tr.unbind('mousemove');tr.bind('mousemove', function () {tr.css('background-color', '#efefef');});tr.unbind('mouseout');tr.bind('mouseout', function () {tr.css('background-color', back);});}},{eventType: 'ready',func: function (param, e) {var scope = this;var edit = scope.getEl('.td_edit');edit.unbind('click');edit.bind('click', function (ee) {var div = scope.getEl('div');div.hide();});}}];this.tdEvent = [{// eventType: 'click',// func: function (param, e) {// var scope = this;// var td = scope.el;// var input = $('<input style="width:100%;height:100%;" value="' + td.text() + '" />');// td.html(input);// }}];this.preInit = new EventHandler();this.initComplete = new EventHandler();this.preLoad = new EventHandler();this.loadComplete = new EventHandler();this.parentEl = $('body');this.colModel = [{'th': { 'title': '<input value="" type="checkbox" class="th_select" />', 'attribute': {}, 'style': {} },'td': { 'type': '', 'value': '', 'template': '<input value="{%title%}" type="checkbox"class="td_select" />', 'attribute': {}, 'style': {} }}, {'th': { 'title': '111', 'attribute': {}, 'style': {} },'td': { 'type': '', 'value': '', 'template': '<input style="display:none;" value="{%title%}" /><div class="td_title">{%title%}</div>', 'attribute': { className: 'wlR' }, 'style': { 'color': 'Blue'} }}, {'th': { 'title': '222', 'attribute': {}, 'style': {} },'td': { 'type': '', 'value': '', 'template': '<textarea style="display:none;" >{%summary%}</textarea><div class="td_summary">{%summary%}</div>', 'attribute': {}, 'style': {} }}, {'th': { 'title': '编辑', 'attribute': {}, 'style': {} },'td': { 'type': '', 'value': '', 'template': '<input type="button" value="编辑" class="td_edit" />', 'attribute': {}, 'style': {} }}];};
GridView.prototype.render = function () {var scope = this;scope.onInit();scope.onLoad();scope.eventBind();};GridView.prototype.onInit = function () {var scope = this;scope.preInit.invoke();scope.initHtml();scope.initAttr();scope.initStyle();scope.initComplete.invoke();};
GridView.prototype.initHtml = function () {var scope = this;var el = $('<table></table>');scope.el = el;var parentEl = scope.parentEl;parentEl.append(el);scope.initHeader();
};
GridView.prototype.initHeader = function () {var scope = this;var header = $('<tr></tr>');header.attr('id', scope.thId);var model = scope.colModel;$.each(model, function (i, col) {var th = col['th'];if (th) {var val = th['title'];var td = $('<th>' + val + '</th>');header.append(td);}});scope.header = header;var table = scope.el;table.append(header);
};
GridView.prototype.initAttr = function () {utils.initAttr(this);
};
GridView.prototype.initStyle = function () {utils.initStyle(this);
};GridView.prototype.onLoad = function () {var scope = this;scope.preLoad.invoke();scope.loadHtml();scope.loadRows();scope.loadComplete.invoke();
};
GridView.prototype.loadHtml = function () {utils.loadhtml(this);
};
GridView.prototype.loadRows = function () {var scope = this;var dataSource = scope.dataSource;$.each(dataSource, function (index, item) {var gridRow = new GridRow();gridRow.parentObj = scope;gridRow.dataSource = item;gridRow.rowIndex = index;gridRow.event = scope.trEvent;gridRow.tdEvent = scope.tdEvent;gridRow.colModel = scope.colModel;gridRow.render();scope.rows.push(gridRow);});};
GridView.prototype.eventBind = function () {var scope = this;scope.headerEventBind();
};GridView.prototype.headerEventBind = function () {var scope = this;var el = scope.el;var thEvent = scope.thEvent;$.each(thEvent, function (i, item) {var func = item.func;el.ready(function (e) {func.call(scope, scope.rows, e);});});
};GridView.prototype.getThEl = function (elementKey) {var scope = this;var thId = scope.thId;var id = "#" + thId + " " + elementKey;var element = $(id);return element;
};
// <reference path="jquery-1.7.1.min.js" />
/// <reference path="GridViewBase.js" />
/// <reference path="GridColum.js" />var GridRow = function () {var scope = this;this.parentObj = null;this.el = null;this.style = {};this.attribute = {};this.dataSource = [];this.columns = [];this.rowIndex;this.colModel = null;this.id = "";this.event = [];this.preInit = new EventHandler();this.initComplete = new EventHandler();this.preLoad = new EventHandler();this.loadComplete = new EventHandler();};
GridRow.prototype.render = function () {var scope = this;scope.onInit();scope.onLoad();scope.eventBind();
};GridRow.prototype.onInit = function () {var scope = this;scope.parentEl = scope.parentObj.el;scope.parentId = scope.parentObj.id;scope.preInit.invoke();scope.initHtml();scope.initAttr();scope.initStyle();scope.initComplete.invoke();};
GridRow.prototype.initHtml = function () {var scope = this;var el = $('<tr></tr>');scope.el = el;var parentEl = scope.parentEl;parentEl.append(el);
};
GridRow.prototype.initAttr = function () {var scope = this;utils.initAttr(this);var el = scope.el;var parentId = scope.parentId;var rowIndex = scope.rowIndex;var id = parentId + "_row_" + rowIndex;scope.id = id;scope.attribute.id = id;el.attr("id", id);
};
GridRow.prototype.initStyle = function () {utils.initStyle(this);
};GridRow.prototype.onLoad = function () {var scope = this;scope.preLoad.invoke();scope.loadHtml();scope.loadCols();scope.loadComplete.invoke();
};
GridRow.prototype.loadHtml = function () {utils.loadhtml(this);
};GridRow.prototype.loadCols = function () {var scope = this;var dataSource = scope.dataSource;var colModel = scope.colModel;utils.formatColTemplate(this);$.each(colModel, function (i, model) {var td = model.td;var gridColumn = new GridColumn();gridColumn.parentObj = scope;gridColumn.dataSource = dataSource;gridColumn.colIndex = i;gridColumn.model = model;gridColumn.attribute = td.attribute;gridColumn.style = td.style;gridColumn.event = scope.tdEvent;gridColumn.render();scope.columns.push(gridColumn);});};GridRow.prototype.eventBind = function () {utils.eventBind(this, this.dataSource);
};GridRow.prototype.getEl = function (elementKey) {var scope = this;var id = scope.id;var id = "#" + id + " " + elementKey;var element = $(id);return element;
};
/// <reference path="jquery-1.7.1.min.js" />
/// <reference path="GridViewBase.js" />var GridColumn = function (cfg) {var scope = this;this.parentObj = null;this.el = null;this.style = {};this.attribute = {};this.type = 'field'; //暂时提供filed数据字段、template模板两种this.model = {};this.colIndex;this.dataSource = null;this.event = [];this.preInit = new EventHandler();this.initComplete = new EventHandler();this.preLoad = new EventHandler();this.loadComplete = new EventHandler();};
GridColumn.prototype.render = function () {var scope = this;scope.onInit();scope.onLoad();scope.eventBind();
};GridColumn.prototype.onInit = function () {var scope = this;scope.parentEl = scope.parentObj.el;scope.parentId = scope.parentObj.attribute.id;scope.preInit.invoke();scope.initHtml();scope.initAttr();scope.initStyle();scope.initComplete.invoke();};GridColumn.prototype.initBody = function (td, dataSource) {var scope = this;var parentEl = scope.parentEl;var templateObj = td['templateObj'];var tempHtm = "";$.each(templateObj, function (i, item) {if (item.field) {tempHtm = tempHtm + item.html + dataSource[item.field];} else {tempHtm = tempHtm + item.html;}});var newHtm = tempHtm;var reg = /\[%(.*?)%\]/;var para = reg.exec(newHtm);while (para && para.length > 0) {var len = para.index;var comStr = para[0].substr(2, para[0].length - 4);var s1 = newHtm.substr(0, len);var s2 = newHtm.substr(len + para[0].length);newHtm = s1 + eval(comStr) + s2;para = reg.exec(newHtm);}tempHtm = newHtm;var td = $('<td>' + tempHtm + '</td>');scope.el = td;parentEl.append(td);};
GridColumn.prototype.initHtml = function () {var scope = this;var dataSource = scope.dataSource;var col = scope.model;var td = col['td'];scope.initBody(td, dataSource);};GridColumn.prototype.initAttr = function () {var scope = this;var el = scope.el;var parentId = scope.parentId;var id = parentId + "_"+scope.colIndex;scope.id = id;scope.attribute.id = id;utils.initAttr(this);el.attr("id", id);};GridColumn.prototype.initStyle = function () {utils.initStyle(this);
};GridColumn.prototype.onLoad = function () {var scope = this;scope.preLoad.invoke();scope.loadHtml();scope.loadComplete.invoke();
};
GridColumn.prototype.loadHtml = function () {};
GridColumn.prototype.eventBind = function () {utils.eventBind(this, this.dataSource);
};
/// <reference path="jquery-1.7.1.min.js" />var Delegate = function (func, sender, param) {this.target = sender;this.method = func;this.invoke = function () {if (func && typeof (func) == "function") {func.call(sender, param);};};
};var EventHandler = function () {this.delegate = [];this.add = function (func, sender, param) {var delegate = new Delegate(func, sender, param);this.delegate.push(delegate);};this.remove = function (func) {for (var i = 0, len = this.delegate.length; i < len; i++) {if (this.delegate[i][func] == func) {this.delegate[func] = null;}}};this.invoke = function () {for (var i = 0, len = this.delegate.length; i < len; i++) {this.delegate[i].invoke();}};
};var GridViewUtils = function () { };
GridViewUtils.prototype.initStyle = function (sender) {var scope = sender;var el = scope.el;$.each(scope.style, function (key, value) {if (typeof (key) == 'string' && key.length > 0) {el.css(key, value);}});
};
GridViewUtils.prototype.initAttr = function (sender) {var scope = sender;var el = scope.el;$.each(scope.attribute, function (key, value) {if (typeof (key) == 'string' && key.length > 0) {if (key == 'className')key = 'class';el.attr(key, value);}});
};
GridViewUtils.prototype.eventBind = function (sender,param) {var scope = sender;var el = scope.el;$.each(scope.event, function (i, item) {var func = item.func;var eventType = item.eventType;if (eventType == "ready") {el.ready(function (e) {func.call(scope, param, e);});} else {el.unbind(eventType);el.bind(eventType, function (e) {func.call(scope, param, e);});}});
};
GridViewUtils.prototype.loadhtml = function (sender) {// var scope = sender;// var parentEl = scope.parentEl;// var el = scope.el;// parentEl.append(el);
};
GridViewUtils.prototype.formatColTemplate = function (sender) {var scope = sender;var model = scope.colModel;var reg = /\{%[\w]*\%}/;$.each(model, function (i, v) {model[i]['td']['templateObj'] = [];var template = v['td']['template'];var para = reg.exec(template);var tempHtml = template;while (para && para.length > 0) {var len = para.index;var temp = {};temp.html = tempHtml.substr(0, len);temp.field = para[0].substr(2, para[0].length - 4);model[i]['td']['templateObj'].push(temp);tempHtml = tempHtml.substr(len + para[0].length);para = reg.exec(tempHtml);}var end = {};end.html = tempHtml;model[i]['td']['templateObj'].push(end);var sss = "";});
};
var utils = new GridViewUtils();
后续
做的过程中，想模拟.net控件的生命周期，并且实现委托那种高级东西，只不过自己学的太浅了，有点不够力啊。
详细请看下个版本吧，此版本欢迎拍砖
转载于:https://www.cnblogs.com/yexiaochai/archive/2012/05/17/2507029.html
【jquery模仿net控件】初步GridView模型实现，及其简单应用相关推荐
- 【jquery模仿net控件】简单的datalist控件更新，及其简单应用
接上次的帖子:http://www.cnblogs.com/yexiaochai/archive/2012/01/22/2328729.html 简单的更新了一下代码,主要针对datalist,这次主 ...
- 【jquery模仿net控件】简单的dropdownlist与datalist
各位大哥晚上好,好久不见.小弟实习了三个月了,由.net转成了java,工作期间正在努力学习. 但是有一点非常痛苦,我不止一次听到一个声音,".net真的很简单,我原来也学过.直接拖就是了. ...
- android比较常用的布局,Android_九宫图比较常用的多控件布局(GridView)使用介绍，GridView跟ListView都是比较常用的 - phpStudy...
九宫图比较常用的多控件布局(GridView)使用介绍 GridView跟ListView都是比较常用的多控件布局,而GridView更是实现九宫图的首选!本文就是介绍如何使用GridView实现九宫 ...
- 弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
- JQuery Highcharts图表控件使用说明
JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...
- 让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能 项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页 ...
- ModalPopupExtender控件和gridview的结合使用
ModalPopupExtender控件和gridview的结合使用(转) 实现效果:当点击gridview中的编辑列对所在行的数据进行编辑时,弹出模态对话框,显示编辑行数据,编辑完成后,关闭模态对话 ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- jquery+bootstrap分页控件
jquery+bootstrap分页控件 源码: (function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = para ...
最新文章
- 『HTML5制造仿JQuery作用』减速
- linux pidof 进程名称查进程id
- python爬虫天气数据_python爬虫：天气数据的分析
- 【lora模块技术无线数传电台】E90-DTU产品高防护等级的体现
- csharp read excel file get sheetName list
- 母版页和母版页子页面中的jquery对服务器控件元素的操作
- 一加Z配置细节曝光：处理器大变 为了更好的进入欧洲市场？
- 【hadoop】Apach Hdoop 安全模式
- maven生成jar包
- mysql - GTID主从复制
- java 如何查询数据库_java怎么查询数据库
- 昆腾公司稍感安慰：向外扩展存储业务营收有所提升
- winstor磁盘阵列数据恢复
- 区块链以及蚂蚁开放联盟链初探索
- ArduPilot — Building the code(Linux/Ubuntu)
- 分辨率，像素，dp之间的联系
- 关于重定向和转发的理解
- html点击按钮动复制推广地址,JavaScript实现点击按钮就复制当前网址
- 终年32岁的传奇数学家，为何让硅谷领袖们集体落泪致敬？
- NXP恩智浦集成开发环境IDE S32DS下载教程（最全）
热门文章
- STM32F1笔记（五）外部中断EXTI
- API函数MessageBox的参数与返回值
- linker `cc` not found
- linux_perf_tools_full
- 【图论】（二分图）J. Burnished Security Updates - CodeForces
- python数据挖掘 百度云,常用数据挖掘算法总结及Python实现高清完整版PDF_python数据挖掘,python数据分析常用算法...
- uva 10570—— Meeting with Aliens
- linux网路编程之TCP状态转换及端口复用
- 数据可视化【十四】交互式过滤地区分布图
- Linux系统【四】进程间通信-管道