jquery : 插件 jsgrid 范例

最新推荐文章于 2024-05-11 09:50:50 发布

belldeep

最新推荐文章于 2024-05-11 09:50:50 发布

阅读量3.6k

点赞数

分类专栏： jquery 文章标签： jquery jsgrid

本文链接：https://blog.csdn.net/belldeep/article/details/63249720

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

From js-grid.com download jsgrid-1.5.3.zip ，也可以从 http://download.csdn.net/detail/belldeep/9783860 下载.

Ensure that jQuery v1.8.3 or later is included.

test_jsgrid.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> jsGrid 范例 </title>
<style>
 * ｛ font-size:12px;｝
   table {border-collapse:collapse;}
   td {border:1px solid #ececec;padding-left:5px;height:25px;line-height:25px;}
</style>
<link type="text/css" rel="stylesheet" href="jsgrid/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="jsgrid/jsgrid-theme.min.css" />

<script type="text/javascript" src="jsgrid/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jsgrid/jsgrid.min.js"></script>
<script type="text/javascript" src="jsgrid/i18n/jsgrid-zh-cn.js"></script>
<script type="text/javascript" src="js/test_jsgrid.js"></script>
</head>
<body>

	<label>请输入编号：</label>
	<input type="text" id="hno" name="hno" value="" /> 
	<input type="button" id="button1" name="button1" value="查询" /></td>
<p>
	<div id="jsGrid"></div>
</p>
</body>
</html>

test_jsgrid.js

$(document).ready(function(){
	// test jsGrid
	$('#button1').click(function(){
		var hno = $('#hno').val();
		if (hno.length >=3){
			$.post("do",{ hno : hno},
				function(data, textStatus){
					var result = data;
					if(result == undefined){
						console.log('result is undefined');
					} else {
						$('#jsGrid').jsGrid({
							width: "100%",
							height: "80%",
							
							inserting: false,
							editing: false,
							sorting: true,
							paging: true,
							
							data: result,
							
							fields: [
							    { name: "id", type: "number", title: "id", width: 10 },
							    { name: "code", type: "text", title: "编码", width: 20 },
							    { name: "name", type: "text", title: "中文名称", width: 70 } ]

						});
					}
				},"json"
			);
		}
	});
})