求教jqgrid用jsp的实现

我在网上查了很多资料，示例很少，官方示例是用php写的，不懂
我想用jsp写，后来找到一个代码：http://huashui.org/post/jqgrid-base-study-7.html
但他用的是struts2，我只想用1，不知如何写
我写的jsp代码如下，查询和刷新按钮无法显示，无法实现分页功能，请各位高手指教后台程序怎么写
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <!-- 先引入样式表 -->
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
    <!-- 引入jQuery 核心文件,UI theme核心包以及jqGrid核心包、语言包 -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.layout.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/jquery.tablednd.js" type="text/javascript"></script>
    <script src="js/jquery.contextmenu.js" type="text/javascript"></script>
    <script src="js/ui.multiselect.js" type="text/javascript"></script>
    <!-- css代码 -->
  <style>
    html,body {
margin: 10; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
 
.ui-tabs-nav li {
position: relative;
}
 
.ui-tabs-selected a span {
padding-right: 10px;
}
 
.ui-tabs-close {
display: none;
position: absolute;
top: 3px;
right: 0px;
z-index: 800;
width: 16px;
height: 14px;
font-size: 10px;
font-style: normal;
cursor: pointer;
}
 
.ui-tabs-selected .ui-tabs-close {
display: block;
}
 
.ui-layout-west .ui-jqgrid tr.jqgrow td {
border-bottom: 0px none;
}
 
.ui-datepicker {
z-index: 1200;}
  </style>
    <script type="text/javascript">   
jQuery(document).ready(function(){   
    jQuery("#list1").jqGrid({   //jqGrid固定的写法:jQuery("#list").jqGrid({参数})
        datatype: "local", //数据来源，本地数据   
        height: 250,//表格高度  
        width:1000, //表格宽度
        colNames:['编号','Date', 'Client', 'Amount','Tax','Total','Notes'],   
        colModel:[   
            {name:'id',index:'id', width:60, sorttype:"int"},   
            {name:'invdate',index:'invdate', width:90, sorttype:"date"},   
            {name:'name',index:'name', width:100},   
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},   
            {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
            {name:'total',index:'total', width:80,align:"right",sorttype:"float"},         
            {name:'note',index:'note', width:150, sortable:false}          
        ],   
        pager: '#pager', //分页工具栏   
        imgpath: 'themes/redmond/images', //图片路径   
        rowNum:10, //每页显示记录数   
        viewrecords: true, //是否显示行数   
        rowList:[10,20,30], //可调整每页显示的记录数   
        multiselect: false, //是否支持多选   
        sortname: 'id',//根据哪个字段排序     
        caption: "jqGrid表格测试", //表格标题
        recordtext: "记录 {0} - {1} of {2}",//显示记录数的格式
        emptyrecords: "无数据",//空记录时的提示信息
        loadtext: "获取数据中...",//获得数据时的提示信息
        pgtext : "第几页 {0} 总页数 {1}"//页数显示格式
    });   
  
    var mydata = [   
            {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
            {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
            {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
            {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
            {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
            {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
            {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
            {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
            {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
            {id:"11",invdate:"2008-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"10",invdate:"2009-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"12",invdate:"2017-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}  
            ];   
    for(var i=0;i<=mydata.length;i++)   
        jQuery("#list1").addRowData(i+1,mydata[i]);   
           
});   
</script>   
<body>   
    <!-- 调用表格并分页 -->
    <table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>  
    <div id="pager" class="scroll"></div>  
</body>    </head>
  
  <body>  </body>
</html>

解决方案 »

  1.   

    没用过.jquery 用的不是特别的多.
      

  2.   

    按钮显示已解决，代码如下：
    $('#list1').navGrid('#nav',{refresh: true,edit: true, add: true,del: true,search: true,refreshtitle:"刷新",edittitle:"修改",addtitle:"添加",deltitle:"删除",searchtitle:"搜索"});我已设置rowNum:10，但不知为何显示一页记录的条数不止10条，另外如何分页还未解决
      

  3.   

    终于搞出来了，代码如下：
    zjsp.jsp
    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <!-- 先引入样式表 -->
        <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
        <!-- 引入jQuery 核心文件,UI theme核心包以及jqGrid核心包、语言包 -->
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
        <script src="js/jquery.layout.js" type="text/javascript"></script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="js/jquery.tablednd.js" type="text/javascript"></script>
        <script src="js/jquery.contextmenu.js" type="text/javascript"></script>
        <script src="js/ui.multiselect.js" type="text/javascript"></script>
        <script type="text/javascript">   
          jQuery(document).ready(function(){   
            jQuery("#list1").jqGrid({   //jqGrid固定的写法:jQuery("#list").jqGrid({参数})
              datatype: "json", //将这里改为使用JSON数据   
              url:'servlet/DataServlet', //这是Action的请求地址   
              mtype:'post', //提交类型
              height: 250,//表格高度  
              width:1000, //表格宽度
              //表格结构定义
              colNames:['编号','Date', 'Client', 'Amount','Tax','Total','Notes'],
              colModel:[   
                {name:'id',index:'id', width:60, sorttype:"int"},   
                {name:'invdate',index:'invdate', width:90, sorttype:"date"},   
                {name:'name',index:'name', width:100},   
                {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},   
                {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
                {name:'total',index:'total', width:80,align:"right",sorttype:"float"},         
                {name:'note',index:'note', width:150, sortable:false}          
              ],  
              pager: '#pager', //分页工具栏   
              imgpath: 'themes/redmond/images', //图片路径   
              rowNum:10, //每页显示记录数   
              viewrecords: true, //是否显示行数   
              rowList:[10,20,30], //可调整每页显示的记录数   
              multiselect: false, //是否支持多选   
              sortname: 'id',//根据哪个字段排序     
              caption: "jqGrid表格测试", //表格标题
              recordtext: "记录 {0} - {1} 总记录数 {2}",//显示记录数的格式
              emptyrecords: "无数据",//空记录时的提示信息
              loadtext: "获取数据中...",//获得数据时的提示信息
              pgtext : "第几页 {0} 总页数 {1}"//页数显示格式
            });   
            //定义默认按键的显示  ,refresh刷新按钮是否显示、edit编辑按钮是否显示、add添加按钮是否显示、del删除按钮是否显示、refreshtitle刷新按钮提示信息
            $('#list1').navGrid('#nav',{refresh: true,edit: true, add: true,del: true,search: true,refreshtitle:"刷新",edittitle:"修改",addtitle:"添加",deltitle:"删除",searchtitle:"搜索"});         
          });   
        </script>   
      </head>
      <body>   
        <!-- 调用表格并分页 -->
        <table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>  
        <div id="pager" class="scroll"></div>  
      </body>  
    </html>DataServlet.java
    import java.io.PrintWriter;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    public class DataServlet extends HttpServlet {   
        private static final long serialVersionUID = 1L;   
        protected void doGet(HttpServletRequest request,   
                HttpServletResponse response) throws ServletException, IOException {   
           
        }   
        protected void doPost(HttpServletRequest request,   
                HttpServletResponse response) throws ServletException, IOException {   
            String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数   
            String rows = request.getParameter("rows"); // 取得每页显示行数，,注意这是jqgrid自身的参数
            int totalRecord = 12; // 总记录数(应根据数据库取得，在此只是模拟)   
            int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord   
                    / Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows)   
                    + 1; // 计算总页数   
            try {   
                int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 开始记录数   
                int pageSize = Integer.parseInt(rows);   
                // 以下模拟构造JSON数据对象 ,该对象是jqgrid的默认返回对象  
                String json = "{total: " + totalPage + ", page: " + page   
                        + ", records: " + totalRecord + ", rows: [";   
                for (int i = index; i < pageSize + index && i < totalRecord; i++) {
                    json += "{cell:['id " + i + "','invdate " + i + "','name " + i   
                            + "','amount "+i+ "','tax "+i+ "','total "+i+"','note "+i+"']}";   
                    if (i != pageSize + index - 1 && i != totalRecord - 1) {   
                        json += ",";   
                    }   
                }   
                json += "]}";   
                System.out.println(json);
                response.getWriter().write(json); // 将JSON数据返回页面   
            } catch (Exception ex) {   
            }   
        }   
    }  
    但搜索还没有搞出来
      

  4.   

    刚想回答你呢 你就搞出来了 下次搞慢点。jqgrid之前我也在用，蛮不错的 ，不过一开始上手确实很郁闷。
    主要麻烦的地方就是后台返回的json的定制。
    自认为对这个还是比较熟悉了，有问题可以留言给我，很高兴能帮到你。
      

  5.   

    一下是查询代码：
    function query(){
    $("#list").setGridParam({page:1,postData:{searchCustomerName:$("#searchCustomerName").val(),searchOrderId:$("#searchOrderId").val(),
    searchIpAddress:$("#searchIpAddress").val(),searchSalse:$("#searchSalse").val()}});
    $("#list").trigger("reloadGrid"); //刷新表格 }作一下说明 ：
    page:1---使得每次查询后返回到第一页，这里的page 应该可以在request里面获得postData 为查询参数，可以多个，格式如上，
      

  6.   

     $('#list1').navGrid('#nav',{refresh: true,edit: true, add: true,del: true,search: true,refreshtitle:"刷新",edittitle:"修改",addtitle:"添加",deltitle:"删除",searchtitle:"搜索"});   
      });   它默认的查询修改删除按钮我都没用。
    而是通过超链接去调用自己写好的方法，再通过ajax去后台删，完了刷新下表，比如删除或批量删除：
    //jqGrid删除单条记录
    function jqGridDel(jqGridId,url,id,idName){
    if (!confirm("是否删除记录？","是","否")){
    return;
    }
    var param = {};
    if (idName == null || idName == ''){
    idName = "entityId";
    }
    eval("param."+idName+"=id");//这里是像后台传递一个 entittyId=??的主键标识，当然这个值是在后台写超链接的时候写进去的。忘了说：json 里面的可以是超链接。
    $.get(url,param,
    function(data,textStatus){
    if(data.success == true){
    //alert("成功删除一条记录！");
      $(jqGridId).trigger("reloadGrid");
      if($("#tagTree").length>0){
      $.tree_reference('tagTree').refresh();
      }
    }else{
    alert(data.message);
    }
    },"json");
    }
      

  7.   

    我写了一段自定义按钮的代码，但按钮显示不出，代码如下：
    jQuery("#list1").jqGrid('navGrid','#nav',{refresh:true,edit:false,add:false,del:false,search: false,refreshtitle:"刷新"}).navButtonAdd('#nav',{buttonicon:"ui-icon-search",title: "搜索",position:"last"});不知是何原因
      

  8.   

    我之前都没有用他自带的按钮。都是自己弄个button然后去调它的接口
    网站上的demo你多看看。
      

  9.   

    jQuery("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false,refresh:false})
    .navButtonAdd('#pager',{
    id : "btn_add",
    caption: "添加",
    buttonicon:"ui-icon-circle-plus", 
    onClickButton : add
    })
    .navButtonAdd('#pager',{
    id : "btn_mod",
    caption: "修改",
    buttonicon : "ui-icon-circle-minus",
    onClickButton : mod
    })
    .navButtonAdd('#pager',{
    id : "btn_del",
    caption: "删除",
    buttonicon : "ui-icon-circle-close",
    onClickButton : del
    })
    .navButtonAdd('#pager',{
    id : "btn_check",
    caption: "审核",
    buttonicon : "ui-icon-circle-arrow-s",
    onClickButton : check
    });
    这有个例子  希望对你有用
      

  10.   

    最近我也在研究这个jqGrid，明显的我还不知道怎么和后台交互。希望您不吝赐教啊。