jquery 第一个实例

最新推荐文章于 2024-07-07 14:24:51 发布

coralandbill

最新推荐文章于 2024-07-07 14:24:51 发布

阅读量304

点赞数

分类专栏： jquery 文章标签： jqgrid jquery

本文链接：https://blog.csdn.net/coralandbill/article/details/8548055

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天在网上看见了jqGrid插件觉得还不错就拿来学习下，从网上找的实例各种有毛病照着做的话总是出现问题并且还并不是最新版本。

经过参照前辈大神们的经验今天终于搞出来了(只是还有一点需要连接数据库的，以后补充)

第一步：

下载jquery jqGrid 官方网址是：http://www.trirand.com/blog/?page_id=6

下载之后解压缩之后如下图：

第二步：

从jqGrid 3.5版开始，jqGrid 完全兼容UI主题。为此，你需要下载所需的主题。主题可从jQuery UI站点http://jqueryui.com/themeroller/中下载，你也可以创建你自己的主题，详细信息请访问http://jqueryui.com。如果你只使用表格组件，只需使用基本的CSS文件ui.theme.css和ui.core.css（位于UI主题包的development-bundle/themes目录中）。有了所有需要的文件后，你就可以安装了

第三步：将jqGrid包中css目录下的ui-jqgrid.css以及plugin目录下的ui.multiselect.css都复制到web的css目录下
将JQuery UI包中的css目录下的所有都复制到web的css目录下
将jqGrid包中js目录下的所有目录和文件复制到web的js目录下

第四步：

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/src/grid.loader.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'data.jsp',
datatype: "json",
mtype: 'POST',
colModel:[
{name:'name',label:'Name', width:150,editable: true},
{name:'id',width:50, sorttype:"int", editable: true},
{name:'email',label:'Email', width:150,editable: true,formatter:'email'},
{name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},
{name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'},
{name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'},
{name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions:{value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},
{name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}
   ],
jsonReader : {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        userdata: "userdata",
        id: "1" //行id 定义为0时行不能选中
    },
     rowNum:2,
     rowList:[10,20,30],
     pager: '#pager',
     sortname: 'id',
     viewrecords: true,
     sortorder: "desc",
     caption:"JSON Example"
});
$('#list').navGrid('#pager', {
     refresh : true,
     edit : true,
     add : true,
     del : true,
     search : true,
     refreshtitle : "刷新",
     edittitle : "修改",
     addtitle : "添加",
     deltitle : "删除",
     searchtitle : "搜索"
    });
   //alert(jQuery("#list").getGridParam('userData'));
// alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" ));
});
</script>
</head>
<body>
<div align="center">
   <table id="list"></table>
</div>
<div id="pager"></div>
</body>
</html>

第五步： data.jsp代码：

{
   "page":1,
   "total":2,
   "records":4,
   "rows":[
         {
           "id":0,
           "name":"sfsf",
           "amount":10,
           "tax":30,
           "total":50.1,
           "note":"3eee2",
           "email":"766915976@qq.com",
           "item.price":"1000.72",
           "item.weight":"1.22",
           "stock":"true",
           "ship":"1"
          },
          {
            "id":1,
            "name":"sfsf",
            "amount":10,
            "tax":30,
            "total":50.1,
            "note":"3eee2"
          },
          {
             "id":2,
             "name":"sfsf",
             "amount":10,
             "tax":30,
             "total":50.1,
             "note":"3eee2"
           },
           {
             "id":3,
             "name":"sfsf",
             "amount":10,
             "tax":30,
             "total":50.1,
             "note":"3eee2"
           }]
}

到此：根据jsp生成的Demo完成

coralandbill

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 第一个实例

前几天在网上看见了jqGrid插件觉得还不错就拿来学习下，从网上找的实例各种有毛病照着做的话总是出现问题并且还并不是最新版本。经过参照前辈大神们的经验今天终于搞出来了(只是还有一点需要连接数据库的，以后补充) 第一步：下载jquery jqGrid 官方网址是：http://www.trirand.com/blog/?page_id=6 下载之后解压缩
复制链接

扫一扫