jqGrid使用

 <script type="text/javascript"><!--
    $(document).ready(function(){
 $("#unilateral_jqGrid").jqGrid({ 
 url: "<%=(request.getContextPath()+ServletPathConstants.DZ_UNILATERAL_DATA_QUERY)%>"+"?is_check=0", 
 datatype:"local", //为local时初始化不加载，支持json，xml等 
 mtype: "POST", 
 colNames:['对账日期','主账号','订单号','订单金额','单边类型','对上日期','对账状态','备注','操作'], //表头 
 colModel:[ //这里会根据index去解析jsonReader中root对象的属性，填充cell 
 {name:'settle_accounts_date', index:'settle_accounts_date', width:100, sortable:false},
 {name:'main_account_name', index:'main_account_name', width:120, sortable:false},
 {name:'order_id', index:'order_id', width:240, sortable:false},
 {name:'order_price', index:'order_price', width:80, sortable:false},
 {name:'result_type', index:'result_type', width:100, sortable:false},
 {name:'new_settle_accounts_date', index:'new_settle_accounts_date', width:100, sortable:false},
 {name:'is_check', index:'is_check', width:80, sortable:false},
 {name:'tag', index:'tag', width:120, sortable:false},
 {name:'del', index:'del', width:80, sortable:false}
 ],
 width: ($("#unilateral_jqGrid").parent().width()-5), //数字 & 'auto','100%' 
 height: 360, 
 rowNum: 30, //每页记录数 
 rowList:[5,10,20,30,50], //每页记录数可选列表 
 //toolbar:[true,"top"],//工具栏
 pager: '#pager', //分页标签divID 
 viewrecords: true, //显示记录数信息，如果这里设置为false,下面的不会显示 recordtext: "第{0}到{1}条, 共{2}条记录", //默认显示为{0}-{1} 共{2}条 scroll: false, //滚动翻页，设置为true时翻页栏将不显示
 /**这里是排序的默认设置，这些值会根据列表header点击排序时覆盖*/ 
 sortable: true, 
 sortname: "IMP_DATE", 
 sortorder: "desc", 
 caption:"文件列表", //显示查询结果表格标题 
 rownumbers: true, //设置列表显示序号,需要注意在colModel中不能使用rn作为index 
 rownumWidth: 20, //设置显示序号的宽度，默认为25 
 shrinkToFit:false, 
 //autoScroll: true,//滚动条
 multiselect: true, //多选框 
 multiboxonly: true, //在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效 
 prmNames : { 
 page: "pageNo",
 rows: "pageSize",
 //sort: "orderId", 
 //order: "sord", 
 search: "search" 
 },
 xmlReader:{ //server返回xml解析设定 
 root: "rows", //对于xml中数据列表 
 page: "page",
 total: "total", 
 records: "records",
 repeatitems: true
 },
 gridComplete: function() {
 //DO 
 //var div_p = $('#orders_jqGrid_div').position();
 //alert(div_p.left);
                ;
                  var rowIds = $("#unilateral_jqGrid").jqGrid('getDataIDs');
                  var curRowData=null;
                  var curChk=null;
                 for(var k=0; k<rowIds.length; k++) {
                    curRowData = $("#unilateral_jqGrid").jqGrid('getRowData', rowIds[k]);
                    curChk = $("#"+rowIds[k]).find(":checkbox");
                    curState=$("#"+rowIds[k]).find("td[aria-describedby='unilateral_jqGrid_state']");
                 }
                 //无记录时
                  var tdArr = $("#tipTab").find("td");
  if(tdArr!=null&&tdArr.length>0){
   $(tdArr[0]).attr("colspan","13");
   $(tdArr[0]).css("color","red");
   $(tdArr[0]).text($(tdArr[tdArr.length-1]).text());
 $(tdArr[0]).css("text-align","center");
  }
             } 
 }); 
 var add_options={
                    width:100,
                   // height:200,
                    left:320,
                    top:30,
                    reloadAfterSubmit:false,
                    jqModal:false,
                    addCaption: "添加新信息",
                    bSubmit: "保存",
                    bCancel: "关闭",
                    closeAfterAdd:true
                };
 $("#do_tag_update").dialog({  
        autoOpen : false,  
        modal : true, // 设置对话框为模态（modal）对话框  
        resizable : true,  
        width : 600, 
        height:350, 
        buttons : { // 为对话框添加按钮  
            "取消" : function() {  
                $("#do_tag_update").dialog("close")  
            },
            "保存":updateBal
      }  
 });
 $("#unilateral_jqGrid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});//这里设定分页bar显示的信息
 //加载上传文件控件，实现显示上传进度条
 var bar = $('.bar');
 var percent = $('.percent');
 var status = $('#status');
    
 $('#consoleForm').ajaxForm({
     beforeSend: function() {
         status.empty();
         var percentVal = '0%';
         bar.width(percentVal)
         percent.html(percentVal);
     },
     uploadProgress: function(event, position, total, percentComplete) {
         var percentVal = percentComplete + '%';
         bar.width(percentVal)
         percent.html(percentVal);
 //console.log(percentVal, position, total);
     },
     success: function() {
         var percentVal = '100%';
         bar.width(percentVal)
         percent.html(percentVal);
     },
 complete: function() {
 alert("上传成功");
 $("#unilateral_add").dialog("close");
 reloadTable();
 $(".percent").text("0%");
 }
 });
 });   
    
    
    
//Jqgird给表格添加URL链接
function processGridValue(){
    var cell;
    var array=gridTable.getDataIDs();
    for ( var i = 0; i < array.length; i++) {
        var rowarray=gridTable.getRowData(array[i])
        for ( var deptDel in rowarray) {
            if(deptDel.indexOf("KPI")>-1){
                cell=gridTable.getCell(i+1,deptDel);
                gridTable.setCell(i+1,deptDel,'<a href="#">xxx'+cell+'</a>');
            }
        }
    }
}
 function reloadTable(){
      var sdata = {   // (3)构建查询需要的参数  
    settle_accounts_date_start:$('#settle_accounts_date_start').val(),
    settle_accounts_date_end:$('#settle_accounts_date_end').val(),
    result_type:$('#result_type').val(),
    file_type:$('#file_type').val(),
    offer_type:$('#offer_type').val(),
    is_check:$('#is_check').val(),
    out_channel_no:$('#out_channel_no').val(),
    order_id:$('#order_id').val(),
    main_account_no:$('#main_account_no').val()
 };
 var currUrl="<%=(request.getContextPath()+ServletPathConstants.ZJHD_UNILATERAL_QUERY)%>";
 $("#unilateral_jqGrid").setGridParam({ datatype: 'xml',url:currUrl}); 
 // (4)获得当前postData选项的值  
 var postData = $("#unilateral_jqGrid").jqGrid("getGridParam", "postData");  
 // (5)将查询参数融入postData选项对象  
 $.extend(postData, sdata); 
  do_query_2();
 }
    function importTable(){
        $("#is_import").attr("value","true");
     document.forms[0].submit();
 }

 function do_query_2(){
 $("#unilateral_jqGrid").trigger("reloadGrid", [{page:1}]);// (7)重新载入Grid表格，以使上述设置生效
 }
 
   /**
回车事件:动态调用函数
*/
 function enterkey(funName){ 
      //消除浏览器差异  
      var event=arguments.callee.caller.arguments[0]||window.event;
     if (event.keyCode == 13){  
      eval(funName);
     }  
 }   
 //对账状态
 function do_state(id){
 var consoleDlg = $("#do_tag_update");
     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
     $("#up_id").val(id);
     consoleDlg.dialog("option", "title", "备注").dialog("open");
     consoleDlg.onkeydown=enterkey('updateBal');
 }
 
 var updateBal=function(){
     var tag=$('#tag').val();
     if(tag.length <= 0) {
 alert("备注不能为空!");
 return ;
 } else if(tag.length > 0 && tag.length > 300) {
 alert("备注不能超过300汉字!");
 return ;
 }
 var currUrl="<%=(request.getContextPath()+ServletPathConstants.ZJHD_UNILATERAL_UPDATE)%>";
     $.ajax({
     type:"POST",
     url:currUrl,
     dateType:"text",
     data:{
     up_id:$("#up_id").val(),
       up_state:$("#up_state").val(),
       tag:$("#tag").val()
      },
     success:function (data){
 alert("处理成功！");
 $("#tag").val("");
 $("#do_tag_update").dialog("close");
 reloadTable();
      }  
     });
    }
 function foartDateValue(object){
 if(object!=null&&object.value!=""&&object.value.length>8){
 object.value=object.value.replaceAll("-","");
 }
 }
 </script>

转载于:https://my.oschina.net/daimatuteng/blog/380323