码迷,mamicode.com
首页 > 其他好文 > 详细

jqGrid使用方法

时间:2015-06-02 17:15:38      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

1.下载文件

  1. 下载jqGrid的软件包,下载地址为:http://www.trirand.com/blog/?page_id=6
  2. 下载jQuery文件,下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
  3. 下载jqGrid皮肤,下载地址为:http://jqueryui.com/themeroller/ 

2.将文件放入工程

3.css和js文件引入

    <link rel="stylesheet" href="/public/jquery/css/start/jquery-ui.css" />
    <link rel="stylesheet" href="/public/jqgrid/ui.jqgrid.css" />
    <script src="/public/jqgrid/jquery-1.6.1.min.js"></script>
    <script src="/public/jqgrid/grid.locale-cn.js"></script>
    <script src="/public/jqgrid/jquery.jqGrid.min.js"></script>

4.js代码

<script type="text/javascript">
        var listpage = "QuestionList.aspx";

        $(document).ready(function () {
            $("#List").jqGrid({
                url: listpage,
                datatype: "json",
                mtype: "post",
                autowidth: true,
                height: auto,
                pager: "#pager",
                hidegrid: false,
                viewrecords: true,
                rowNum: 2,
                recordtext: "共{2}条记录",
                colNames: [Id, 回复, 提问者, 提问内容, 提问时间, 操作],
                colModel: [
                    { name: Id, width: 0, sortable: false, hidden: true },
                    { name: Replier, width: 0, sortable: false, hidden: true },
                    { name: Asker, width: 100, sortable: false },
                    { name: AskContent, width: 300, sortable: false },
                    { name: AskTime, width: 120, sortable: false, formatter: "date", formatoptions: { srcformat: Y-m-d H:i:s, newformat: Y-m-d H:i:s } },
                    { name: Operate, width: 60, sortable: false }
                ],
                jsonReader: {
                    root: "griddata",
                    total: "totalpages",
                    page: "currpage",
                    records: "totalrecords",
                    repeatitems: false
                },
                gridComplete: function () {
                    var rows = $("#List").jqGrid("getDataIDs");
                    for (var i = 0; i < rows.length; i++) {
                        var curRowData = $("#List").jqGrid("getRowData", rows[i]);
                        //alert(curRowData.Replier);
                        if (curRowData.Replier == "") {
                            var reply = "<a href=\"javascript:void(0);\" name=\"reply\" rowIndex=\"" + rows[i] + "\"  style=\"color:red;\">未回复</a>";
                        } else {
                            var reply = "<a href=\"javascript:void(0);\" name=\"reply\" rowIndex=\"" + rows[i] + "\" >已回复</a>";
                        }

                        var del = "<a href=\"javascript:void(0);\" name=\"del\" rowIndex=\"" + rows[i] + "\" >删除</a>";
                        $("#List").jqGrid(setRowData, rows[i], { Operate: reply + " " + del });
                    }
                    $("a[name=‘reply‘]").click(function () {//回复
                        var rowData = $("#List").jqGrid("getRowData", $(this).attr("rowIndex"));
                        location.href = "Question.aspx?id=" + rowData.Id;
                    });
                    $("a[name=‘del‘]").click(function () {//删除
                        if (!window.confirm(您确认要删除吗?)) { return false; }
                        var rowData = $("#List").jqGrid("getRowData", $(this).attr("rowIndex"));
                        $("#List").jqGrid(setGridParam, { url: listpage + "?method=delete&id=" + rowData.Id + "&reply=" + $("#reply").val() }).trigger("reloadGrid");
                    });
                }
            });
            $("#List").jqGrid(navGrid, #pager, { search: false, del: false, add: false, edit: false });
        });
    </script>

5.在body中加入代码:

<div>
<!-- jqGrid table list4 -->
<table id="List"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="pager"></div>
</div>

 

jqGrid使用方法

标签:

原文地址:http://www.cnblogs.com/linhuide/p/4546586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!