- 浏览: 88284 次
- 性别:
- 来自: 宜昌
文章分类
最新评论
-
chenaha:
不知道大哥是否会用sencha touch,我想写一个这样的效 ...
用ext读取XML写一个“省-市-邮编”三级联动
$.fn.grid = function(p) { var grid = this; var g = { reload: function() { grid.attr('page', 1); po.loadData(); }, getSelected: function() { var ret = []; var rows = []; if (g.sm == 'single') { rows = $(":radio:checked", g.body).parents('tr'); } if (g.sm == 'multi') { rows = $(":checkbox:checked", g.body).parents('tr'); } rows.each(function() { var rowIndex = this.rowIndex - 1; ret.push(g.data[rowIndex]); }); return ret; } }; var po = { init: function() { g.url = grid.addClass("grid").attr({ page: 1, pagesize: 10 }).attr("url"); g.sm = grid.attr("sm"); g.header = $("tr.gridheader", grid); g.cm = $("td", g.header); g.header.prepend(po.createHeaderSm()); po.loadData(); }, createHeaderSm: function() { var td = $('<td>').width(30).attr('align', 'center'); if (g.sm == 'single') { return td.html('选择'); } if (g.sm == 'multi') { var c = $("<input type='checkbox'/>"); c.bind('click', function() { $(":checkbox", g.body).attr('checked', $(this).attr('checked')); }); return td.append(c); } }, createBodySm: function() { var td = $('<td>').width(30).attr('align', 'center'); if (g.sm == 'single') { var c = $("<input type='radio' name='smitem'/>"); return td.append(c); } if (g.sm == 'multi') { var c = $("<input type='checkbox'/>"); return td.append(c); } }, getParams: function() { if (typeof(p) == 'function') { var temp = p(); if (typeof(temp) == 'string') { var arr = temp.split("&"); var ret = {}; $(arr).each(function() { var k = this.split("=")[0]; var v = this.split("=")[1]; ret[k] = v; }); return ret; } if (typeof(temp) == 'object') { return t; } } if (typeof(p) == 'object') { return p; } return {}; }, loadData: function() { grid.loading(); var params = po.getParams(); var page = parseInt(grid.attr('page')); var pagesize = parseInt(grid.attr('pagesize')); params['page'] = page; params['pagesize'] = pagesize; $.ajax({ url: g.url, type: "post", async: true, data: params, dataType: "json", context: this, success: function(d) { g.total = d['total']; g.data = d['data']; var page = parseInt(grid.attr('page')); var pagesize = parseInt(grid.attr('pagesize')); g.page = page; g.pagesize = pagesize; g.pagecount = Math.ceil(g.total / g.pagesize); po.showData(); } }); }, showData: function() { $(":checkbox", g.header).attr('checked', false); $("tr.gridbody", grid).remove(); $('tr.gridpagebar', grid).remove(); $(g.data).each(function() { var row = $('<tr>').addClass('gridbody'); row.append(po.createBodySm()); var record = this; g.cm.each(function() { var html = ""; var p = $(this).attr("property"); var render = $(this).attr("render"); var align = $(this).attr("align"); var width = $(this).width(); var html = record[p]; if (render) { html = eval(render).call(this, record, record[p]); } var cell = $("<td>").width(width).attr("align", align).html(html); row.append(cell); }); grid.append(row); }); g.body = $("tr.gridbody", grid); g.body.filter(":odd").css("background", "#eee"); po.buildPager(); }, buildPager: function() { var tr = $('<tr>').addClass('gridpagebar').height(30); var colspan = g.sm ? (g.cm.size() + 1) : g.cm.size(); var td = $("<td>").attr('colspan', colspan); if (g.total > 0) { if (g.pagecount > 1) { td.append(po.displayMsg()); td.append(po.changePager()); } tr.append(td); } else { tr.append(td.html('没有数据')); } grid.append(tr); g.pagebar = $("tr.gridpagebar", grid); grid.unloading(); }, displayMsg: function() { var space = " "; var msg = "总共{total}条记录" + space + "当前第{page}/{pagecount}页" + space + "显示第{from}~{to}条记录"; var start = (g.page - 1) * g.pagesize; var limit = (g.page < g.pagecount) ? g.pagesize: (g.total % g.pagesize); var from = parseInt(start) + 1; var to = parseInt(start) + parseInt(limit); msg = msg.replace(/{total}/g, g.total); msg = msg.replace(/{page}/g, g.page); msg = msg.replace(/{pagecount}/g, g.pagecount); msg = msg.replace(/{from}/g, from).replace(/{to}/g, to); return $('<span>').html(msg); }, changePager: function() { var space = $("<span> </span>"); var first = $("<a>").attr("href", "javascript:void(0)").html('首  页').click(function() { if (g.page > 1) { grid.attr('page', 1); po.loadData(); } }); var prev = $("<a>").attr("href", "javascript:void(0)").html('上一页').click(function() { if (g.page > 1) { grid.attr('page', g.page - 1); po.loadData(); } }); var next = $("<a>").attr("href", "javascript:void(0)").html('下一页').click(function() { if (g.page < g.pagecount) { grid.attr('page', g.page + 1); po.loadData(); } }); var last = $("<a>").attr("href", "javascript:void(0)").html('尾  页').click(function() { if (g.page < g.pagecount) { grid.attr('page', g.pagecount); po.loadData(); } }); if (g.page == 1) { first.attr("disabled", "disabled"); prev.attr("disabled", "disabled"); } if (g.page == g.pagecount) { next.attr("disabled", "disabled"); last.attr("disabled", "disabled"); } var pm = $('<span>'); pm.append(space.clone()).append(first); pm.append(space.clone()).append(prev); pm.append(space.clone()).append(next); pm.append(space.clone()).append(last); return pm; } }; po.init(); return g; };
(function(){ var plugins = ['grid']; function parser(){ $(plugins).each(function(){ var p = $('.rzy-' + this); if(p.length){ $('.rzy-' + this)[this](); } }); } $(parser); })(jQuery); $.fn.grid = function() { var g = this; //这里是header var header = []; header.push("<div class='list-header'>"); var icon = this.attr('icon'); var caption = this.attr('caption'); var toolbar = this.attr('toolbar'); var url = this.attr('url'); if(icon){ header.push("<div class='list-icon icon-"); header.push(icon); header.push("'></div>"); } if(caption){ header.push("<div class='list-title"); if(icon){ header.push(" title-with-icon"); } header.push("'>"); header.push(caption); header.push("</div>"); } if(toolbar){ } header.push("</div>"); //这里是body var body = []; body.push("<div class='list-body'><table cellspacing='0' cellpadding='0' class='list-body-table'>"); //这里是表头 body.push("<thead><tr>"); var cols = $('div',g); g.empty(); cols.each(function(){ body.push("<td>"); body.push(this.header); body.push("</td>"); }); body.push("</tr></thead>"); //这里是数据行 body.push("<tbody><tr>"); body.push("<td colspan="); body.push(cols.size()); body.push("></td>"); body.push("</tr></tbody>"); body.push("</table>"); //这里是pager var pager = []; pager.push("<div class='list-pager'><table cellpadding='0'>"); var pageList = "<tr><td><select style='margin:0 6px;'><option>10</option><option>15</option><option>20</option></select></td>"; pager.push(pageList); var separator = "<td><div class='pager-separator'></div></td>"; pager.push(separator); var first = "<td><a class='pager-first' href='javascript:void(0)' hidefocus='true'> </a></td>"; pager.push(first); var prev = "<td><a class='pager-prev' href='javascript:void(0)' hidefocus='true'> </a></td>"; pager.push(prev); pager.push(separator); var pagenum = "<td><div>第<input type='text' name='pagenum' class='pager-num' size=2/>共10页</div></td>"; pager.push(pagenum); pager.push(separator); var next = "<td><a class='pager-next' href='javascript:void(0)' hidefocus='true'> </a></td>"; pager.push(next); var last = "<td><a class='pager-last' href='javascript:void(0)' hidefocus='true'> </a></td>"; pager.push(last); pager.push("</tr></table></div>"); body.push(pager.join('')); body.push("</div>"); function render(){ g.append(header.join('')); g.append(body.join('')); } function load(){ $.ajax({ url: url, dataType:'json', success:function(data){ var tbody = $('table.list-body-table tbody',g); tbody.empty(); $(data.rows).each(function(){ var r = $('<tr>') var row = this; cols.each(function(){ $("<td>").html(row[this['field']]).appendTo(r); }); tbody.append(r); }); } }); } render(); load(); };
发表评论
文章已被作者锁定,不允许评论。
-
win animate
2013-08-28 22:44 443$(function () { var win= $( ... -
最新ARI
2013-07-18 19:18 817package util; import java. ... -
grid
2013-07-02 18:43 842(function($){ $.fn.G ... -
tabs
2013-07-02 16:40 596<!DOCTYPE html PUBLIC " ... -
MongoDB
2012-12-20 19:53 670MongoDB -
grid
2012-09-03 07:56 733(function(){ var plugins = [ ... -
transtreenode
2012-05-07 11:52 0function transformToNodes(dat ...
相关推荐
**DHTMLX Grid组件详解** DHTMLX是一个广泛使用的JavaScript库,它提供了多个富客户端UI组件,其中之一就是“Grid”组件。这个免费的grid组件在Web应用开发中扮演着重要角色,尤其对于数据密集型应用,它能提供高效...
网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...
在IT领域,Grid组件是一种常见的数据展示和管理工具,它被广泛应用于网页和应用程序中,以展示和操作结构化的数据。在本项目“测试Grid组件的程序”中,我们聚焦于一个基于JQuery的Grid实现,它展示了这个组件的强大...
在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
官方android开发工具,并没有Grid 针对于优秀的三层工具Remobjects DataAbstract for java 开发一个简单易用的Grid for DA 使用方法很简单: tableGrid = (DataViewGrid) findViewById(R.id.dvg); tableGrid....
这个压缩包"vue 封装grid 布局-表单.zip"显然包含了利用Vue.js进行组件封装的实践,特别是针对表格(grid)布局和表单设计。Vue与Element-UI或Iview-UI的结合是常见的做法,这两个都是基于Vue的UI组件库,提供了丰富...
官方android开发工具,并没有Grid 针对于优秀的三层工具Remobjects DataAbstract for java 开发一个简单易用的Grid for DA 使用方法很简单: tableGrid = (DataViewGrid) findViewById(R.id.dvg); tableGrid....
《Flex中的Grid组件深度解析——以GridDemo.zip为例》 在Web应用开发领域,Adobe Flex以其强大的富互联网应用程序(RIA)构建能力而受到广大开发者喜爱。Flex提供了丰富的UI组件库,其中,Grid组件是用于展示数据...
Grid组件通常用于显示大量可操作的数据,它支持滚动、分页和列自定义。jQuery UI的Grid(即jqGrid)是此类组件的一个例子。jqGrid提供了一套完整的API和事件,允许用户与数据进行交互,如编辑、添加、删除和搜索...
本文将基于已获取的反编译源码,对GT_GRID组件进行深度剖析,并探讨其内在的工作原理和应用技巧。 首先,我们来了解GT_GRID的基本架构。GT_GRID的核心设计是基于JavaScript,充分利用了Web前端的技术优势,实现了...
在本篇博文中,我们将探讨如何从网页或Web应用程序的Grid组件中提取数据,以及可能涉及的工具和技术。 首先,我们需要了解Grid组件的基本概念。Grid是Web开发中的一个布局工具,它允许我们以表格形式展示数据,这些...
在gridview里分为三个区域:首行、首列、数据区域。当首行左右滑动时,数据区域同步左右滑动;当首列上下滑动时,数据区域同步上下滑动;当数据区域左右滑动时,首行与之同步滑动;当数据区域上下滑动时,首列与之...
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统,它允许开发者创建自定义的工作台,用户可以根据需要自由调整各个组件的位置和大小。在本教程中,我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
标题中的"org.eclipse.nebula.widgets.grid_1.0.0.jar_gridview_everyt8y_"暗示了我们正在讨论的是Eclipse Nebula项目中的一个组件,具体是Grid Viewer相关的库,版本为1.0.0。这个库是用于构建用户界面的,特别适用...
在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...
带有网格组件的MERN示例。 在该示例中,我们使用mangoDB来处理数据库操作,使用expressJS来处理REST服务以与客户端和服务器进行通信,使用React来创建客户端,使用webpack来处理源捆绑。 Syncfusion Essential ...
综上所述,"angularjs ui-grid datepicker"是一个将AngularJS的UI-Grid组件与日期选择器功能相结合的技术,它提供了更丰富的用户体验,简化了日期数据的输入过程。在实际开发中,根据具体需求调整和配置,可以实现...
EXT Designer是Sencha公司提供的一个可视化设计工具,它可以帮助开发者更加直观地构建EXT-JS应用程序,包括Grid组件。 EXT-JS Grid的基本结构包含行、列和单元格,可以绑定到数据源,如JSON或XML文件,也可以通过...