建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery的网格图表插件jquerygrid

来源:易助科技网浏览量:36收藏

简介

JQuery的网格图表插件jquerygrid,数据部分用常规的 table 显示,能实现分页,单选,多选,列交换,行点击事件,嵌套列表等功能。

(下载的附件中附有多种用法DEMO)



使用

1.  引入文件


<link rel="stylesheet" href="../css/grid.css" type="text/css">

<script type="text/javascript"
 src="../jquery.min.js"></script>
<script type="text/javascript"
 src="../js/grid.js"></script>


2.  HTML


<div id="gridContainer" style="width: 900px; height: 500px;">
  <div id="gridDiv" class="grid">
    <div class="hDiv">
      <table
        style="LINE-HEIGHT: 1.4; margin: 0; padding: 0; BORDER-COLLAPSE: collapse; border: 0px solid red;"
	    cellSpacing=0 cellPadding=0>
	    <tr>
	      <th ><div style="width:200px;">姓名</div></th>
		  <th ><div style="width:200px;">角色</div></th>
		  <th ><div style="width:400px;">描述</div></th>
        </tr>
	  </table>
    </div>
    <div class="bDiv"></div>
	<div class="pDiv">
	  <table>
	    <tr>
		  <td><div class="pFirst pButton"></div></td>
		  <td><div class="pPrev pButton"></div></td>
		  <td><div class="btnseparator"></div></td>
		  <td><span class="pcontrol"> 第 <input type="text" size="4" value="1">页 共 <span> 1 </span>页</span></td>
		  <td><div class="btnseparator"></div></td>
		  <td><div class="pNext pButton"></div></td>
		  <td><div class="pLast pButton"></div></td>
		  <td><div class="btnseparator"></div></td>
		  <td><div class="pReload pButton"></div></td>
		  <td><div class="btnseparator"></div></td>
		  <td><span class="pPageStat">Processing, please wait...</span></td>
		</tr>
	  </table>
	</div>
  </div>
</div>


3.  简单调用


<script type="text/javascript">
  $(function(){
	new grid({
	  containerDiv:"gridDiv",//列表div
	  url:"table.html",
	  rp:20,
	  animate : true// 是否可以交换列,改变列宽度
	});
  });
</script>



相关链接

Gitee 地址 :https://gitee.com/jimmy001/jquerygrid/blob/master/grid.rar