zoukankan      html  css  js  c++  java
  • jqGrid系列:安装使用jqGrid

    jqGrid的安装分为基本安装和进阶安装。

    基本安装:如果只是为了使用jqGrid,基本安装足够。如果还想要访问jqGrid源码调试,改善,在完成基本安装后,还需要进一步的设置才可以,这就是所谓的进阶安装。

    基本安装:

    step 1:为web项目创建两个文件夹。分别用于存放项目的样式文件和项目使用的脚本文件。在这里假设是css 和 js,css文件夹用于存放样式文件,js文件夹用于存放脚本文件。

    step 2:解压缩jqGrid和jquery ui 样式文件。

    step 3:将jqGrid中的css/ui.jqgrid.css 复制到css文件夹下

    setp 4:将jquery ui 样式复制到css文件夹下

    step 5:将jqGrid中的js/i18n文件夹,js/jquery.jqGrid.min.js和js/jquery-1.4.2.min.js复制到js文件夹下

    step 6:创建HTML文件

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My First Grid</title>   <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />   <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>   </head>
    <body>
    ...
    </body>
    </html>

    进阶安装

         使用src文件夹下的未压缩js文件

    step 1 :复制src文件夹到项目中的js文件夹

    step 2:打开the grid.loader.js 文件,改变文件中的pathtojsfiles变量值为“js/src/”

    step 3:改变js和css样式文件路径。如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My First Grid</title>   <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />   <style>
    html, body {
        margin: 0;
        padding: 0;
        font-size: 75%;
    }
    </style>   <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/src/grid.loader.js" type="text/javascript"></script>   </head>
    <body>
    ...
    </body>
    </html>
  • 相关阅读:
    NYOJ 1073 最大值 (模拟)
    NYOJ 1063 生活的烦恼 (二叉树)
    NYOJ 1022 合纵连横 (并查集)
    [leetcode-553-Optimal Division]
    [leetcode-496-Next Greater Element I]
    [leetcode-556-Next Greater Element III]
    [leetcode-500-Keyboard Row]
    [leetcode-36-Valid Sudoku]
    [leetcode-127-Word Ladder]
    [leetcode-567-Permutation in String]
  • 原文地址:https://www.cnblogs.com/fromchaos/p/1917871.html
Copyright © 2011-2022 走看看