`
danwind
  • 浏览: 234080 次
  • 性别: Icon_minigender_1
  • 来自: 广东
社区版块
存档分类
最新评论

jquery表格插件及JavaScript选择框

    博客分类:
  • Ajax
阅读更多
1.把对应的jQuery包导入进来。页面加载时,加入jQuery初始化。首先是得到表格的id,然后再调用jQuery插件中的dataTable()方法即可。如下所示
   $(function() {
      $('#tableID').dataTable();				
   });

表格标准格式:
<table id="tableid">
    <thead>
        <th></th>
        <th></th>
        <th></th>
        </thead>
	</tbody>
    <tr>
	<td></td>
	<td></td>
	<td></td>
    </tr>
	</tbody>
</table>

2.JavaScript选择框选择问题。首先在一个页面中添加一个select控件,然后在父页面打开一个新页面,称为子页面。在此页面中添加checkbook控件,在子页面中点击checkbook时,把对应的值填入父页面中select控件去。实现代码如下:
<script type="text/javascript">
		<!--
		$(function() {
			$('#tableID').dataTable();				
		});
		
		function selectBoxClick(id, name, checkBox){
		    if(checkBox.checked == true) {
			    addrole(id, name);
		    } else {
		    	notAddRole(id);
		    }
		    
		}

		function addrole(id, name){
			self.opener.addrolepoint(id, name);
		}

		function notAddRole(id){
		    var list = self.opener.document.getElementById('role_ids');
		    var maxCnt = list.options.length;
		    for(var i = maxCnt - 1; i >= 0; i--){
		        if ((list.options[i] != null) && (list.options[i].value == id)){
		            list.options[i] = null;
		        }
		    }
		}

		function addrolepoint(id, name){
			var groupIds = window.document.getElementById('role_ids');
			var newplace = groupIds.options.length;
			if (newplace > 0 && groupIds.options[0].value == ""){
			  newplace = 0;
			}
			for (var i = 0; i < groupIds.options.length; i++){
				if (groupIds.options[i].value == id){
					newplace = -1;
				}

			}
			if (newplace > -1){
				groupIds.options[newplace] = new Option(name + " (" + id + ")", id);
			}
		}
		-->
		</script>
分享到:
评论

相关推荐

    强大的jQuery表格插件

    - **DataTables**:DataTables是最受欢迎的jQuery表格插件之一,支持排序、过滤、分页、列选择等多种功能,并且有多种语言和主题可供选择。 - **Handsontable**:Handsontable是一个强大的交互式表格,适合数据编辑...

    37款开源jQuery表格插件

    这些jQuery表格插件不仅提供了丰富的表格管理功能,而且大都是开源的,用户可以根据自己的需求选择合适的插件,进行免费下载和使用。使用这些插件可以极大地简化开发流程,提升开发效率,并且由于它们的流行和广泛...

    jquery插件--表格分页

    二、jQuery表格分页插件 jQuery有多个插件用于实现表格分页,例如: 1. jQuery DataTables:这是一个强大的数据表插件,它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式,同时提供了多种数据...

    jquery表格插件Flexigrid

    综上所述,Flexigrid是一个强大且灵活的jQuery表格插件,它提供了丰富的功能和高度的可定制性,适合用于构建数据密集型的Web应用。掌握上述知识点,将有助于你有效地使用和优化Flexigrid,创建出符合用户需求的高效...

    jquery表格插件

    在本篇文章中,我们将深入探讨jQuery表格插件的基本概念、核心功能以及如何在实际项目中应用。 首先,了解jQuery是至关重要的。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...

    bootstraptable基于Bootstrap的jQuery表格插件

    BootstrapTable 是一个基于 jQuery 和 Bootstrap 框架的开源表格插件,它的出现极大地简化了在 Web 应用中创建功能丰富的数据展示表格的过程。这个插件提供了多种实用功能,如单选、多选、排序、分页、编辑、导出和...

    浅析JQuery框架及其插件应用

    ### 浅析JQuery框架及其插件应用 #### 一、jQuery框架概述 JQuery,一个由美国程序员John Resig创建的JavaScript库,自诞生以来迅速成为全球开发者钟爱的工具之一。它以“写得少,做得多”(WRITELESS,DOMORE)的...

    这是一款头部固定的响应式jQuery表格插件

    这款头部固定的jQuery表格插件,正是为了提供更好的用户体验而设计的,尤其是在处理大量数据时。它允许用户在浏览长表格时,始终保持表头可见,方便用户在任何时候都能清楚地了解列的含义。 1. **jQuery基础**:...

    jquery 表格插件 Flexigrid

    总结来说,Flexigrid是jQuery生态中一款功能强大、易于使用的表格插件,对于需要展示和操作表格数据的Web应用来说,是一个值得考虑的选择。通过熟练掌握其配置和API,开发者可以构建出高性能、交互性强的数据展示...

    创建自己的jquery表格插件

    创建自定义的jQuery表格插件涉及到前端开发的多个技术点。以下从各个方面详细阐述实现该插件时需要掌握的知识点。 ### jQuery基础 jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、...

    jQuery表格插件

    jQuery表格插件是一种广泛应用于网页开发中的工具,它利用JavaScript库jQuery的强大功能,为开发者提供了一种简单、高效的方式来创建和操作动态、交互式的表格。这些插件通常包含丰富的功能,如排序、过滤、分页、...

    jQuery带分页动态数据表格插件

    本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先,我们需要理解jQuery的核心概念。jQuery通过提供易用的API,使得JavaScript代码更简洁、更高效。例如,`$(selector)`用于选取DOM元素,`....

    jquery 2个表格插件

    flexigrid是另一个流行的jQuery表格插件,它提供了类似的功能,但有着独特的设计和一些特定的优点: 1. **轻量级**:相比于DataTables,flexigrid更轻巧,加载速度快,适合资源有限的环境。 2. **自定义列宽**:...

    使用jquery实现表格动态分页

    **一、jQuery分页插件的选择与使用** jQuery提供了许多分页插件,例如`jQuery DataTables`、`jQuery Pagination`等。以`jQuery DataTables`为例,它是广泛使用的表格增强插件,内置了强大的分页功能。 1. **安装和...

    漂亮的基于jQuery的表格插件

    基于jQuery的表格插件则是为了提升网页中数据展示和操作的用户体验而设计的。本篇文章将深入探讨“漂亮的基于jQuery的表格插件”,特别是提及的dataTables 1.6版本。 首先,让我们关注“漂亮的”这一特性。这通常...

    Excel样式表格单元格选择jQuery插件

    本文将深入探讨“Excel样式表格单元格选择jQuery插件”的相关知识点,帮助开发者实现类似Excel的交互体验。 一、jQuery基础 在理解这个插件之前,我们首先要了解jQuery的基本概念。jQuery是由John Resig开发的,它...

    jQuery表格编辑添加删除行插件.zip

    《jQuery表格编辑添加删除行插件详解》 在网页开发中,数据展示和操作是必不可少的部分,而表格作为数据组织的重要形式,其编辑、添加和删除功能极大地提升了用户体验。jQuery作为一个轻量级、高效的JavaScript库,...

Global site tag (gtag.js) - Google Analytics