【JavaScript】WEB jquery jqgrid方法純JS展現和編輯大量數據
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
JQuery jqGrid是開發Web應用程序中數據表格的一種非常強大、靈活和可自定義的工具。它提供了多種功能,例如分頁、排序、搜索、編輯、滾動和導出等,可以與多種數據源進行交互。它的使用簡單、靈活,能夠處理大量數據,具有高度的自定義性。了解了JQuery jqGrid的各種方法,我們可以更好地管理和展示大量的數據表格,使得數據更加易于管理、搜索和分析。 JQuery jqGrid是一種強大、靈活和可自定義的Javascript表格插件,它采用了JQuery框架進行開發,可以幫助用戶快速、輕松地創建和管理復雜的數據表格。它提供了豐富的特性和功能,例如分頁、排序、搜索、編輯、滾動和導出等。 JQuery jqGrid主要被用于Web應用程序中的數據表格顯示和編輯。它可以與多種數據源進行交互,例如XML、JSON和本地數組等。用戶可以通過使用JQuery jqGrid插件,將復雜的數據表格轉化為用戶友好的界面,使得數據更加易于管理。 JQuery jqGrid是什么? JQuery jqGrid是基于JQuery框架的一種Javascript表格插件,也是一種開源項目。它支持多種數據源進行交互,可以處理大量數據,還提供較為靈活和自定義的配置選項。 JQuery jqGrid特點:
JQuery jqGrid使用簡單和靈活。用戶可以根據自己的需求和喜好調整表格的外觀和功能。
JQuery jqGrid可以處理大量的數據,支持分頁和滾動操作。這極大地增強了表格的可用性和效率。
JQuery jqGrid可以與多種數據格式進行交互,包括XML,JSON,本地數組等。
JQuery jqGrid提供排序和搜索功能,可以根據表格的列數據進行排序操作,并進行復雜的搜索。這使得用戶可以更加方便地找到需要的數據。
JQuery jqGrid可以編輯和行操作。用戶可以在表格內進行編輯、刪除、復制、粘貼等操作,并且支持行拖拽和調整大小。 Jqgrid入門-顯示基本的表格(一)
(1)HTML部分
1. <link href="<%=basePath%>main/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2. <link href="<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> 3. <script type="text/javascript" src="<%=basePath%>main/js/jquery-1.7.2.js"></script> 4. <script type="text/javascript" src="<%=basePath%>main/js/grid.locale-zh_CN.js"></script> 5. <script type="text/javascript" src="<%=basePath%>main/js/jquery.jqGrid.min.js"></script> 6. <script type="text/javascript" src="<%=basePath%>main/js/grid.custom.js"></script> 7. <table id="list"></table> 8. <div id="page"></div> (2)JS部分1. jqGrid的重要選項
2. colModel的重要選項
3. jsonReader選項1. jsonReader : { 2. root : "rows", // 實際模型的人口 3. page : "page", // 當前頁碼 4. total : total, // 當前共多少頁 5. records : "records", // 總共多少行數據 6. repeatitems : true, 7. cell : "cell", 8. id : "id", 9. userdata : "userdata", // 數據 10.subgrid : { 11.root : "rows", 12.repeatitems : true, 13.cell : "cell" 14.} 15.} 1. jsonReader : { 2. root : "dataList", // 服務端保存數據的集合 3. records : "record", // 可以不要,因為我的服務端是record,不是默認的,才加上的 4. repeatitems : false 5. // 其它的全部默認就行 6. } 由此,Jqgrid完成一個request,并將得到的response,解析為所需的數據,顯示到Grid表格中。整個流程就走完了。 Jqgrid入門-操作表格的數據(二)1. getGridParam1. var id = $("#gridTable").jqGrid("getGridParam", "selrow"); //獲得選中行的ID 2. var sort = $("#gridTable").jqGrid("getGridParam", "sortname"); //獲得排序的字段 3. var page = $("#gridTable").jqGrid("getGridParam", "page"); //獲得當前的頁數 4. var row = $("#gridTable").jqGrid("getGridParam", "rowNum"); //獲得當前頁的行數 5. var count = $("#gridTable").jqGrid("getGridParam", "records"); //獲得總記錄數 6. var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多選時,返回選中行的ID 2. getRowData1. var getRowdata = function() { 2. var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 3. var rowData = $("#gridTable").jqGrid("getRowData", selectedId);
1. var addStudent= function() { 2. var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 3. var dataRow = { 4. id : 99, 5. lastName : "Zhang", 6. firstName : "San", 7. email : "<a href="mailto:zhang_san@126.com">zhang_san@126.com</a>", 8. telNo : "0086-12345678" 9. }; 10.if (selectedId) { 11.$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId); 12.} else { 13.$("#gridTable").jqGrid("addRowData", 99, dataRow, "first"); 14.} 15.}; 4. setRowData
1. var updateStudent = function() { 2. var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 3. var dataRow = { 4. lastName : "Li", 5. firstName : "Si", 6. email : "<a href="mailto:li_si@126.com">li_si@126.com</a>" 7. }; 8. var cssprop = { 9. color : "#FF0000" 10.}; 11.$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop); 12.}; 1. var deleteStudent = function() { 2. var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 3. $("#gridTable").jqGrid('delRowData', selectedId); 4. }; 1. $("#gridTable").jqGrid("setGridParam", { 2. datatype : "json", 3. search : true, 4. mtype : "post" 5. }).trigger("reloadGrid"); Jqgrid入門-使用模態對話框編輯表格數據(三)
1. // 配置模態對話框 2. $("#consoleDlg").dialog({ 3. autoOpen : false, // 是否自動彈出窗口 4. modal : true, // 設置為模態對話框 5. resizable : true, 6. width : 500, 7. height : 300, 8. position : "center" // 窗口顯示的位置 9. }); 1. gridComplete : function() { 2. var ids = jQuery("#gridTable").jqGrid('getDataIDs'); 3. for ( var i = 0; i < ids.length; i++) { 4. var cl = ids[i]; 5. update = "<input type='button' value='修改' onclick='updateStu(" 6. + cl + ")'/> "; 7. del = "<input type='button' value='刪除' onclick='deleteStu(" 8. + cl + ")'/> "; 9. view = "<input type='button' value='查看' onclick='viewStu(" 10.+ cl + ")'/>"; 11.jQuery("#gridTable").jqGrid('setRowData', 12.ids[i], { 13.process : update + del + view 14.}); 15.} 16.},
1. /** 2. * 彈出新增學生對話框 3. */ 4. function addStu() { 5. var consoleDlg = $("#consoleDlg"); 6. consoleDlg.html(""); 7. var a1 = " <iframe src='studentProcess.jsp?op=add'"+ "style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>"; 8. consoleDlg.append(a1); 9. consoleDlg.dialog("option", "title", "新增學生信息").dialog("open"); 10.}; 1. function addStu() { // 序列化表單 2. var obj2 = $("#myform").serializeArray(); 3. $.ajax({ url : "QueryActionUrl_addStu.action", 4. data : obj2, 5. dataType : "json", 6. cache : false, 7. type : "post", 8. error : function(textStatus, errorThrown) { 9. window.parent.hiAlert("系統ajax交互錯誤"); }, 10.success : function(data, textStatus) { 11.if (data.messageBean.code == "200") { 12.hiAlert(data.messageBean.msg, "提示", function() { 13.window.parent.$("#consoleDlg").dialog("close"); // 刷新表格 14.window.parent.$("#gridTable").jqGrid("setGridParam", { 15.search : true, mtype : "post" }).trigger("reloadGrid", [ { 16.page : 1 } 17.]); 18.}); 19.} else { 20.hiAlert(data.messageBean.msg, "提示", function() { 21.window.parent.$("#consoleDlg").dialog("close"); }); 22.} 23.} 24.}); 25.}
1. /** 2. * 彈出修改學生的對話框 3. */ 4. function updateStu(selectedRowId) { 5. var consoleDlg = $("#consoleDlg"); 6. consoleDlg.html(""); 7. var str = $("#gridTable").jqGrid("getRowData", selectedRowId); // 根據行ID,獲取選中行的數據 8. id = { 9. id : str.id 10.}; 11.var a1 = " <iframe src='studentProcess.jsp?op=update&id=" 12.+ JSON.stringify(id) 13.+ "' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>"; 14.consoleDlg.append(a1); 15.consoleDlg.dialog("option", "title", "修改學生信息").dialog("open"); 16.}; 1. function updateStu() { 2. var obj2 = $("#myform").serializeArray(); 3. $.ajax({ 4. url : "QueryActionUrl_updateStu.action", 5. data : obj2, 6. dataType : "json", 7. cache : false, 8. type : "post", 9. error : function(textStatus, errorThrown) { 10.window.parent.hiAlert("系統ajax交互錯誤"); 11.}, 12.success : function(data, textStatus) { 13.if (data.messageBean.code == "200") { 14.hiAlert(data.messageBean.msg, "提示", function() { 15.window.parent.$("#consoleDlg").dialog("close"); 16.// 刷新表格 17.window.parent.$("#gridTable").jqGrid("setGridParam", { 18.search : true, 19.mtype : "post" 20.}).trigger("reloadGrid", [ { 21.page : 1 22.} ]); 23.}); 24.} else { 25.hiAlert(data.messageBean.msg, "提示", function() { 26.window.parent.$("#consoleDlg").dialog("close"); 27.}); 28.} 29.} 30.}); 31.} 該文章在 2023/8/22 18:35:04 編輯過
|
關鍵字查詢
相關文章
正在查詢... |