jquery : 插件 jsgrid 范例
生活随笔
收集整理的這篇文章主要介紹了
jquery : 插件 jsgrid 范例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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");}}); })
總結(jié)
以上是生活随笔為你收集整理的jquery : 插件 jsgrid 范例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
