标签:
1.下载文件
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>
标签:
原文地址:http://www.cnblogs.com/linhuide/p/4546586.html