jqGrid表格实例

1.导入所需要用的js、css文件

一般jqgrid表格用这些就够了,如果你希望好看一点可以在网上下载主题包然后导入进去

<!--jqgrid引用-->
    <link rel="stylesheet" href="${ctxPath}/plugins/jqgrid/jqgrid/css/ui.jqgrid.css">
    <link rel="stylesheet" href="${ctxPath}/plugins/jqgrid/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="${ctxPath}/js/page/grid_extension.js"></script>

注意

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤设置 jqGrid 表格样式: 1. 引入 jqGrid 插件和样式文件。 ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script> ``` 2. 在 HTML 页面中添加一个 div 元素作为表格容器。 ``` <div id="grid"></div> ``` 3. 使用 JavaScript 代码初始化 jqGrid 表格并设置样式。 ``` $(function(){ $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 150 }, { name: "age", label: "Age", width: 50 }, { name: "address", label: "Address", width: 200 } ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "asc", caption: "Sample Grid" }); $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false }); }); ``` 4. 在 CSS 文件中添加样式。 ``` .ui-jqgrid { font-size: 14px; } .ui-jqgrid tr.jqgrow td { padding: 5px; } .ui-jqgrid .ui-jqgrid-hdiv { background-color: #f2f2f2; } .ui-jqgrid .ui-jqgrid-btable { border-collapse: separate; border-spacing: 0px; } .ui-jqgrid .ui-jqgrid-pager { background-color: #f2f2f2; border-top: none; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table { margin: 0; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button { border: none; margin: 0 5px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover { background-color: #e6e6e6; } ``` 注意:样式文件中的样式可以根据需要进行修改,以上只是一个示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值