pqgrid对json数据的绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | $( function () { var data = [[1, 'Exxon Mobil' , '339,938.0' , '36,130.0' ], [2, 'Wal-Mart Stores' , '315,654.0' , '11,231.0' ], [3, 'Royal Dutch Shell' , '306,731.0' , '25,311.0' ], [4, 'BP' , '267,600.0' , '22,341.0' ], [5, 'General Motors' , '192,604.0' , '-10,567.0' ], [6, 'Chevron' , '189,481.0' , '14,099.0' ], [7, 'DaimlerChrysler' , '186,106.3' , '3,536.3' ], [8, 'Toyota Motor' , '185,805.0' , '12,119.6' ], [9, 'Ford Motor' , '177,210.0' , '2,024.0' ], [10, 'ConocoPhillips' , '166,683.0' , '13,529.0' ], [11, 'General Electric' , '157,153.0' , '16,353.0' ], [12, 'Total' , '152,360.7' , '15,250.0' ], [13, 'ING Group' , '138,235.3' , '8,958.9' ], [14, 'Citigroup' , '131,045.0' , '24,589.0' ], [15, 'AXA' , '129,839.2' , '5,186.5' ], [16, 'Allianz' , '121,406.0' , '5,442.4' ], [17, 'Volkswagen' , '118,376.6' , '1,391.7' ], [18, 'Fortis' , '112,351.4' , '4,896.3' ], [19, 'Crédit Agricole' , '110,764.6' , '7,434.3' ], [20, 'American Intl. Group' , '108,905.0' , '10,477.0' ]]; var obj = { width: 700, height: 400, title: "Grid From Array" }; obj.colModel = [{ title: "Rank" , width: 100, dataType: "integer" }, { title: "Company" , width: 200, dataType: "string" }, { title: "Revenues ($ millions)" , width: 150, dataType: "float" , align: "right" }, { title: "Profits ($ millions)" , width: 150, dataType: "float" , align: "right" }]; obj.dataModel = { data: data }; var $grid = $( "#grid_parts" ).pqGrid(obj); $( "#grid_parts_topVisible" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "topVisible" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "topVisible" )); $( "#grid_parts_bottomVisible" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "bottomVisible" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "bottomVisible" )); $( "#grid_parts_columnBorders" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "columnBorders" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "columnBorders" )); $( "#grid_parts_rowBorders" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "rowBorders" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "rowBorders" )); $( "#grid_parts_oddRowsHighlight" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "oddRowsHighlight" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "oddRowsHighlight" )); $( "#grid_parts_numberCell" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "numberCell" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "numberCell" )); $( "#grid_parts_autoHeight" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "flexHeight" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "flexHeight" )); $( "#grid_parts_autoWidth" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "flexWidth" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "flexWidth" )); $( "#grid_parts_horizontal" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "scrollModel" , { horizontal: $( this ).is( ":checked" ) }); }).attr( "checked" , $grid.pqGrid( "option" , "scrollModel.horizontal" )); $( "#grid_parts_resizable" ).change( function (evt) { //alert(""); $grid.pqGrid( "option" , "resizable" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "resizable" )); $( "#grid_parts_paging" ).change( function (evt) { var paging= "" ; if ($( this ).is( ":checked" )) { paging = "local" ; } $grid.pqGrid( "option" , "dataModel.paging" , paging); }).attr( "checked" , ($grid.pqGrid( "option" , "dataModel.paging" )== "local" )? true : false ); $( "#grid_parts_roundCorners" ).change( function (evt) { $grid.pqGrid( "option" , "roundCorners" , $( this ).is( ":checked" )); }).attr( "checked" , $grid.pqGrid( "option" , "roundCorners" )); }); |
因为它可以免费商用,也不需要你开源,而且完全支持jquery 很不错的一个前端表格控件。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端