jqGrid使用方法

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: ,
                recordtext: "共{2}条记录",
                colNames: ['Id', '回复', '提问者', '提问内容', '提问时间', '操作'],
                colModel: [
                    { name: 'Id', width: , sortable: false, hidden: true },
                    { name: 'Replier', width: , sortable: false, hidden: true },
                    { name: 'Asker', width: , sortable: false },
                    { name: 'AskContent', width: , sortable: false },
                    { name: 'AskTime', width: , sortable: false, formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
                    { name: 'Operate', width: , sortable: false }
                ],
                jsonReader: {
                    root: "griddata",
                    total: "totalpages",
                    page: "currpage",
                    records: "totalrecords",
                    repeatitems: false
                },
                gridComplete: function () {
                    var rows = $("#List").jqGrid("getDataIDs");
                    for (var i = ; 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>