jquery : 插件 jsgrid 范例
司马项明
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"
);
}
});
})
类似资料：