社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > jqgrid 简单学习笔记_jquery

jqgrid 简单学习笔记_jquery

WBOY
发布： 2016-05-16 18:07:02
原创
1854 人浏览过

JqGrid文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

JqGrid Demo：http://trirand.com/blog/jqgrid/jqgrid.html#t107

JqGrid的基础，我这里就不做介绍了，不知道的可以去看看博客园或Google，最好去看文档。先看效果图：

clip_image002

本Demo可以查询、修改、分组。新增、删除等一些基本功能都可以去JqGrid Demo中找到。

逻辑思路：第一次加载本年度的经营计划数据，加载完成后，将JqGrid设置成本地数据，这样分页、数据查询都成customs。只能修改本月以后的计划，在afterShowForm和afterclickPgButtons做验证，如果时间小于等于本月，这将提交按钮设置成disabled。否则提交按钮可以使用。在提交服务器前，需要将JqGrid的datatype设置成json,否则不会请求服务器。

本Demo只做了2010、2011、2012年三个静态数据源，修改数据只做了返回信息，并没修改数据源数据。

Apsx页面代码：





Javascript中JqGrid的配置代码：
复制代码 代码如下:

jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
datatype: function (pdata) {
$.ajax({ url: 'DataHandler.ashx',
dataType: "json", type: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: pdata,
error: function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("客服端解析数据错误！\n请与管理员联系");
else
alert"请求服务器错误！\n请稍后再试或与管理员联系");
},
complete: function (jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" + jsondata.responseText + ")");
thegrid.addJSONData(data);
data = null;
jsondata = null;
}
}
});
},
colNames: ["行号", "日期期间", "c_code", "单位名称", "销售回款", "营业收入", "工业总产值", "利润总额", "上交税金"],
colModel: [{ name: "ROWNUM", index: "ROWNUM", editable: false, summaryType: 'count',
summaryTpl: '({0}) total'
},
{ name: "JHQJ", index: "JHQJ", editable: true, stype: 'text', search: true, searchoptions: { sopt: ['eq'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "C_CODE", index: "C_CODE", sortable: false, editable: true, search: false, hidden: true,
editrules: { edithidden: false }, editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "DWJC", index: "DWJC", editable: true, search: true, stype: 'text', searchoptions: { sopt: ['cn'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "a21", index: "a21", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a22", index: "a22", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a23", index: "a23", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a24", index: "a24", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a25", index: "a25", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 70,
rowTotal: 1300,
rowList: [13, 70, 100],
rownumbers: false,
loadonce: true,
loadtext: '載入中...',
forceFit: true,
gridview: true,
pager: '#pager',
sortname: 'ROWNUM',
scroll: 0,
page: 1,
viewrecords: true,
editurl: 'DataHandler.ashx',
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
grouping: false,
groupingView: {
groupField: ['DWJC'],
groupColumnShow: [true],
groupText: ['{0}'],
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "
分组:
     
     
    "
    });

    对一些属性做一个解释：
    datatype：如果设置成json ,那么请求的数据是json格式。而且每次增删查改操作，都会请求服务器。
    如果设置成local ,那么所有操作都将在是客服端完成，不发送到服务器。
    如果设置成函数(见本示例)，每次获取数据，都会经过本函数处理一次。
    可以通过调试JS代码，来验证。
    rownumbers: 设置成false，就不显示行号；否则反之
    loadonce: 设置成true，表示一次性导入数据；默认为false
    rowTotal: 表色一次性导入数据的最大行数。
    jsonReader：配置与服务器端返回的数据做相关对应，详细情况见文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
    gridComplete：全部数据加载完成并且其他所有处理事件完成时触发。英文文档解释：This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc.如果你只是数据加载完成时就需要触发某个函数，可以采用loadComplete事件。
    loadComplete：This event is executed immediately after every server request. data Data from the response depending on datatype grid parameter
    caption：字符串类型。表格的标题。但这里可以写一些html代码，这是一个小技巧。
    grouping ：默认false 不分组，反之亦然。
    groupingView：关于分组：请参考JqGrid Demo，里面有详细介绍。
    editurl：编辑数据发送Url
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    jQuery("#jqgridlist").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true })
    .navButtonAdd("#pager", {
    caption: "",
    buttonicon: "ui-icon-pencil",
    onClickButton: function () {
    var gr = jQuery("#jqgridlist").jqGrid("getGridParam", "selrow");
    if (gr != null)
    jQuery("#jqgridlist").jqGrid("editGridRow", gr, {
    afterclickPgButtons: function (whichbutton, formid, rowid) {
    var ret = jQuery("#jqgridlist").jqGrid('getRowData', rowid),
    objYear = ret.JHQJ;
    if (!ValidateDate(objYear)) jQuery("#sData").attr('disabled', 'disabled');
    else
    jQuery("#sData").removeAttr('disabled');
    },
    afterShowForm: function (formid) {
    var jqgrid = jQuery("#jqgridlist");
    var rowid = jqgrid.jqGrid("getGridParam", "selrow"),
    ret = jqgrid.jqGrid('getRowData', rowid);
    if (!ValidateDate(ret.JHQJ)) jQuery("#sData").attr('disabled', 'disabled');
    else
    jQuery("#sData").removeAttr('disabled');
    },
    beforeSubmit: function (postdata, formid) {
    var reg = "^(([1-9]\\d*)|0)(\\.\\d{1,2})?$";
    if (!Regex(reg, postdata.a21))
    return [false, "销售回款 格式错误"];
    if (!Regex(reg, postdata.a22))
    return [false, "营业收入 格式错误"];
    if (!Regex(reg, postdata.a23))
    return [false, "工业总产值 格式错误"];
    if (!Regex(reg, postdata.a24))
    return [false, "利润总额 格式错误"];
    if (!Regex(reg, postdata.a25))
    return [false, "上交税金 格式错误"];
    else
    return [true, ""];
    },
    afterSubmit: function (response, postdata) {
    var json = response.responseText; //format is {status:"success/error",msg:""}
    var result = eval("(" + json + ")"), successs = false;
    if ("success" == result.status) {
    successs = true;
    $("#FormError td").html(result.msg);
    $("#FormError").show();
    }
    return [successs, result.msg, ""];
    }
    });
    else
    alert("请选择行");
    },
    position: "first",
    title: "修改",
    cursor: "pointer"
    }).filterToolbar({ stringResult: true, autosearch: true, searchOnEnter: false, groupOp: "AND" });
    function Regex(reg, val) {
    var patt = new RegExp(reg, "g");
    return patt.test(val);
    }
    function ValidateDate(objYear) {
    var year = null,
    month = null,
    currentYear = null,
    date = new Date();
    if (objYear.length == 4) {
    year = parseInt(objYear.substr(0, 4));
    currentYear = parseInt(date.getFullYear());
    } else {
    year = parseInt(objYear.substr(0, 6))
    month = (date.getMonth() + 1).toString();
    month = month.length == 1 ? "0" + month : month;
    currentYear = parseInt(date.getFullYear() + month);
    }
    if (year return false; //不?可¨¦以°?编À¨¤辑-
    else
    return true; //可¨¦以°?编À¨¤辑-
    }
    });
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    动态改变分组
    jQuery("#chngroup").live("change", function () {
    var vl = $(this).val(); if (vl) {
    if (vl == "clear") {
    jQuery("#jqgridlist").jqGrid('groupingRemove', true);
    } else {
    jQuery("#jqgridlist").jqGrid('groupingGroupBy', vl);
    }
    }
    });
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    Slider 控制代码
    function CreateYearList() {
    var currentYear = parseInt(new Date().getFullYear());
    var mulitYear = currentYear - 1990;
    var objul = $(".slider_context ul");
    if (mulitYear >= 0) {
    for (var index = -1, len = mulitYear; index if (currentYear - index == currentYear)
    objul.append("
  • " + currentYear.toString() + "
    • ");
    else
    objul.append("
  • " + (currentYear - index).toString() + "
    • ");
    }
    } else {
    objul.append("
  • " + currentYear.toString() + "
    • ");
    }
    }
    $(function () {
    CreateYearList();
    $(".slider").silder({
    speed: "normal",
    slideBy: 2
    });
    });
    $(".slider_context li").live("click", function () {
    $.each($(".slider_context li"), function (id, item) {
    $(this).removeClass('selected');
    });
    $(this).addClass('selected');
    var yearVal = $(this).html();
    var jqgrid = $("#jqgridlist");
    jqgrid.setGridParam({ datatype: 'json' });
    jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });
    jqgrid.trigger("reloadGrid");
    jqgrid.jqGrid('removePostDataItem', "f");
    });
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var jqgrid = $("#jqgridlist");
    //即本次修改前 先将datatype修改成json,否则不能回发到服务器
    jqgrid.setGridParam({ datatype: 'json' });
    jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//添加PostData
    jqgrid.trigger("reloadGrid");//重新加载JqGrid
    jqgrid.jqGrid('removePostDataItem', "f");//删除PostData
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    gridComplete: function () {
    $("#jqgridlist").setGridParam({ datatype: 'local' });
    },
    每次加载完成 就将jqgrid设置成本地数据。
    Demo下载地址 /201105/yuanma/JqGridDemo.rar
    相关标签：
    学习笔记
    来源：php.cn
    上一篇：jQuery 常见操作实现方式和常用函数方法总结_jquery 下一篇：jQuery1.6 正式版发布并提供下载_jquery
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
    来自于 2024-04-29 11:01:01
    0
    3
    2206
    google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
    来自于 2024-04-23 00:22:19
    0
    11
    2358
    子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
    来自于 2024-04-19 15:37:47
    0
    1
    1973
    父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
    来自于 2024-04-18 23:52:34
    0
    1
    1857
    关于CSS思维导图的课件在哪？ 课件
    来自于 2024-04-16 10:10:18
    0
    0
    1922
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板