【jquery模仿net控件】初步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">

<head>

$(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>

</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);

}

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 () {

scope.onInit();

scope.onLoad();

scope.eventBind();

GridView.prototype.onInit = function () {

scope.preInit.invoke();

scope.initHtml();

scope.initAttr();

scope.initStyle();

scope.initComplete.invoke();

GridView.prototype.initHtml = function () {

var el = $('<table></table>');

scope.el = el;

var parentEl = scope.parentEl;

parentEl.append(el);

scope.initHeader();

GridView.prototype.initHeader = function () {

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 () {

scope.preLoad.invoke();

scope.loadHtml();

scope.loadRows();

scope.loadComplete.invoke();

GridView.prototype.loadHtml = function () {

utils.loadhtml(this);

GridView.prototype.loadRows = function () {

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 () {

scope.headerEventBind();

GridView.prototype.headerEventBind = function () {

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 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 () {

this.parentObj = null;

this.attribute = {};

this.columns = [];

this.rowIndex;

this.colModel = null;

this.id = "";

this.event = [];

GridRow.prototype.render = function () {

GridRow.prototype.onInit = function () {

scope.parentEl = scope.parentObj.el;

scope.parentId = scope.parentObj.id;

GridRow.prototype.initHtml = function () {

var el = $('<tr></tr>');

GridRow.prototype.initAttr = function () {

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 () {

GridRow.prototype.onLoad = function () {

scope.loadCols();

GridRow.prototype.loadHtml = function () {

GridRow.prototype.loadCols = function () {

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 id = scope.id;

var id = "#" + id + " " + elementKey;

/// <reference path="jquery-1.7.1.min.js" />

var GridColumn = function (cfg) {

this.type = 'field'; //暫時提供filed資料字段、template模闆兩種

this.model = {};

this.colIndex;

this.dataSource = null;

GridColumn.prototype.render = function () {

GridColumn.prototype.onInit = function () {

scope.parentId = scope.parentObj.attribute.id;

GridColumn.prototype.initBody = function (td, dataSource) {

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 col = scope.model;

var td = col['td'];

scope.initBody(td, dataSource);

GridColumn.prototype.initAttr = function () {

var id = parentId + "_"+scope.colIndex;

GridColumn.prototype.initStyle = function () {

GridColumn.prototype.onLoad = function () {

GridColumn.prototype.loadHtml = function () {

GridColumn.prototype.eventBind = function () {

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.delegate[i].invoke();

var GridViewUtils = function () { };

GridViewUtils.prototype.initStyle = function (sender) {

var scope = sender;

$.each(scope.style, function (key, value) {

if (typeof (key) == 'string' && key.length > 0) {

el.css(key, value);

GridViewUtils.prototype.initAttr = function (sender) {

$.each(scope.attribute, function (key, value) {

if (key == 'className')

key = 'class';

el.attr(key, value);

GridViewUtils.prototype.eventBind = function (sender,param) {

$.each(scope.event, function (i, item) {

var eventType = item.eventType;

if (eventType == "ready") {

el.ready(function (e) {

func.call(scope, param, e);

el.unbind(eventType);

el.bind(eventType, function (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 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控件的生命周期，并且實作委托那種進階東西，隻不過自己學的太淺了，有點不夠力啊。

詳細請看下個版本吧，此版本歡迎拍磚

本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2012/05/17/2507029.html，如需轉載請自行聯系原作者

【jquery模仿net控件】初步GridView模型實作，及其簡單應用

繼續閱讀

SQL語言基礎：常用的資料查詢語句

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

sqlServer根據經緯查距離

layui多任務上傳添加進度條