jQuery easyUI--数据表格 datagrid 的使用
生活随笔
收集整理的這篇文章主要介紹了
jQuery easyUI--数据表格 datagrid 的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>數據表格 datagrid</title><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script><script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" /><link rel="stylesheet" href="../js/easyui/themes/icon.css" /><script type="text/javascript">$(function(){// 頁面加載后，對datagrid 進行設置$("#grid").datagrid({// 設置表格一些屬性 columns : [[ // 二維數組 支持 多級表頭， 每一個數組 就是表頭一行{field: "id", // 用于和服務器返回json中字段對應 title: "編號", // 列標題顯示內容， <th> width: 100},{field: "name", // 用于和服務器返回json中字段對應 title: "商品名稱", // 列標題顯示內容， <th> width: 100},{field: "price", // 用于和服務器返回json中字段對應 title: "價格", // 列標題顯示內容， <th> width: 100}]],url : "product.json" , // 加載json數據，顯示表格數據 pagination : true , // 分頁工具條toolbar : [ // 一維數組，定義按鈕 {id : "saveBtn",text : "保存",iconCls : "icon-save",handler : function(){alert("保存...");}}]});});</script></head><body><!--數據表格--><table id="grid"></table></body>
</html>
總結
以上是生活随笔為你收集整理的jQuery easyUI--数据表格 datagrid 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery easyUI--弹窗的使用
- 下一篇： SpringDataJpa使用示例