当页面点击分页图标时，程序会自动去后台获取对应页数的记录。 关键代码如下： 需要引入的css和js文件有： 代码如下: css/theme/default/css/jpage.css"> css/config.css" /> js/jquery.js"> 其中jsp页面代码如下： 代码如下: var pageIndex = 1; //当前页数 $(function(){ GetPageCount();//获取分页数量以及总的记录条数 $("#load").hide();//隐藏loading提示 $("#template").hide();//隐藏模板 ChangeState(0,1);//设置翻页...
具体代码如下： 引用js和css文件有： 代码如下: 页面代码： 代码如下: 选择 用户ID 用户名称 所在科室 创建时间 创建人 菜单集名称 是否有效 ${smUser.userId } ${smUser.userName } ${smUser.organCode } ${smUser.createTime } ${smUser.creator } ${smUser.menusId } ${smUser.valid } $("#userTable").tablePaging(); 此处要特别注意的是要讲table的表头加上标签，且注意此处的table的id为userTable，...
代码如下: $(tr).hover(function(event) { $(this)[ (event.type == mouseenter ? add : remove) + Class ](test); //test是样式 }); $(tr).hover(function(event) { $(this).toggleClass(test); //test是样式 }); $(tr).hover(function(){ $(this).addClass(test); //test是样式 },function(){ $(this).removeClass(test); //test是样式 }); 注：一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BU...
官方Demo地址：http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图： 页面代码： 代码如下: 本地数据 $(document).ready(function(){ $("#list1").jqGrid({ datatype:"local", height:250, colNames:['自动编号','地区编号','地区名称','所属城市编号'], colModel:[ //这一项比较重要， 其中的name属性主要是用于后期的页面代码（注意这里的范围是本页面上的代码，不会涉及到后台代码）， 而index属性是则是用于涉及...
这里我使用Jquery库，这个就不用过多介绍了，有几个知识点： - 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始 - tempRow.parent()，表示返回tempRow对象的父节点对象 - $("").prependTo()，表示将一个td元素添加到指定元素的内容头部 实例代码 index.html 代码如下: body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #gridview, #gridview td { b...
扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults，用 $.fn.combogrid.defaults 重写了 defaults 。 依赖 combo datagrid 用法 代码如下: 代码如下: 代码如下: $(#cc).combogrid({ panelWidth:450, value:006, idField:code, textField:name, url:datagrid_data.json, columns:[[ {field:code,title:Code,width:60}, {field:name,title:Name,width:100}, {field:addr,title:Address,width:120}, {field:col4,title:Co...
我的思路是这样的： 1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立 2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态 3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以 4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能下面是我实现的功能代码： editable.js 代码如下: /* code: editable.js version: v1.0 date: ...
扩展自 $.fn.datagrid.defaults，用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下: 代码如下: $(#tt).treegrid({ url:treegrid_data.json, treeField:name, columns:[[ {title:Task Name,field:name,width:180}, {field:persons,title:Persons,width:60,align:right}, {field:begin,title:Begin Date,width:80}, {field:end,title:End Date,width:80} ]] }); 特性 其特性扩展自 datagrid，下列是为...
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 代码如下: 代码如下: $(#tt).datagrid({ url:datagrid_data.json, columns:[[ {field:code,title:Code,width:100}, {field:name,title:Name,width:100}, {field:price,title:Price,width:100,align:right} ]] }); 数据表格（DataGrid）的特性<?XML:NAMESPACE PREFIX = O /> 其特性扩展自 panel...
第一个例子 简介 ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的“显示/隐藏” 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和...
代码如下: 表格隔行背景和突出显示当前行 body{ margin:0 auto; font-size:12px;} .data_list td{ width:100px;} /* 当鼠标移到表格上是，当前一行背景变色 */ $(document).ready(function(){ $(".data_list tr td").mouseover(function(){ $(this).parent().find("td").css("background-color","#d5f4fe"); }); }) /* 当鼠标在表格上移动时，离开的那一行背景恢复 */ $(document).ready(function(){ $(".data_list tr td"...
查了些资料，写了4个Demo： 1. 隔行着色 代码如下: $(#table1 tr:odd).addClass(odd); $(#table1 tr:even).addClass(even); 效果：2. 高亮含有特定数据的行 代码如下: $("#table2 tr:contains(Fuck)").addClass("selected"); 3. 筛选数据 代码如下: $("#filter").click( function(){ $("#table3 .datarow").hide().filter(":contains(ABCDEFG)").show(); } ); 4. 根据用户输入，即时筛选数据 代码如下: $("#keyword").keyup(...
在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//左键 代码如下: jQuery 动态增删表格 $(document).ready(function(){ var addToTrTop = 10; var addToTrLeft = 534; var preEdit = null; var inputData = ''; var bindListening = function(){ //表格点击响应 $("td").unbind().click(function(){ var tdData = $("#tmpEditor").val(); if( !$(this)....
表格：合并单元格 参考示例：合并单元格 调用方法：margeCells。如下代码： 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 } ]; grid.margeCells(marges); }
功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码： HTML代码： 代码如下: Item1 Item2 Item3 arthinking Jason itzhai arthinking Jason ...