jqgrid使用分析

简述

jqgrid 是一款非常容易上手的jquery数据网格插件，基于jquery ui主题样式，通过ajax和后端服务器接口实现通信，以xml、json等数据格式在浏览器端和服务器端通信。jqgrid 在网络上能够找到很多学习资料，文档也很全面。其官网地址为：http://www.trirand.com

demo

服务器端（用的java springMVC）

package com.ztesoft.controller;

import com.ztesoft.po.User;
import com.ztesoft.vo.Page;
import com.ztesoft.vo.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by bozutung on 7/22/16.
 */
@Controller(value = "testController")
@RequestMapping(value = "test")
public class TestController {

    @RequestMapping("user")
    @ResponseBody
    public String findUser() {
        String result = "";
        result = "{\"root\":[{\"name\":\"xiaoming_0\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_1\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_2\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_3\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_4\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_5\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_6\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_7\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_8\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"},{\"name\":\"xiaoming_9\",\"gender\":\"男\",\"age\":10,\"tel\":\"1325111045\"}],\"page\":2,\"total\":20,\"records\":200}";
        return result;
    }

}

浏览器端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页面</title>
    <link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui-1.8.2.custom.min.js"></script>
    <script src="js/grid.locale-en.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
</head>
<body>
<h3>jqgrid test page!</h3>
<table id="list"></table>
<div id="pager"></div>

<script>
        jQuery("#list").jqGrid({
            url: '/practice/test/user.do',
            datatype: "json",
            mtype: 'GET',
            colNames: ['姓名', '性别', '年龄', '电话', '操作'],
            colModel: [
                { name: 'name', index: 'name', width: 40, align: "left", editable: true },
                { name: 'gender', index: 'gender', width: 100, align: "center" },
                { name: 'age', index: 'age', width: 100, align: "center" },
                { name: 'tel', index: 'tel', width: 150, align: "center", search: false },
                {name:'del',index:'del', width:150,align:"center", sortable:false,formatter:function(cellvalue, options, row){return '<a href="#" onclick="delRow('+row.id+')">删除</a>'}}
            ],
            rowList: [10, 20, 30],
            sortname: 'name',
            viewrecords: true,
            sortorder: "desc",
            prmNames: {
              search: 'search'
            },
            jsonReader: {
                root: "root",
                total: "total",
                page: "page",
                records: "records",
                repeatitems: false
            },
            pager: jQuery('#pager'),
            rowNum: 5,
            altclass: 'altRowsColour',
            width: '500',
            height: 'auto',
            caption: "DemoGrid"
        }).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
</script>

</body>
</html>

界面效果

优劣分析

优势

较为灵活

可以通过在调用时使用prmNames选项设置从浏览器端传到服务器端的参数名，便于服务器端处理；

同样也可以使用jsonReader或其他数据格式解析选项设置服务器端回传数据格式，让服务器端和浏览器端的交互变得灵活。

风格和 jquery ui 统一

能够自定义主题（初学者基本不可能，所以我也不懂）。还可以使用jquery ui的主题，界面表现出jquery ui一致的风格，易于界面风格的统一。

不足

逻辑和布局没有分离

jqgrid的代码没有实现逻辑和布局分离，两部分耦合在一起，用户很难修改布局模板，下面是核心源码截图（js里面耦合了html布局）：

依赖较多

jquery ui为jqgrid带来风格一致好处的同时导致了jqgrid依赖jquery ui的库，每次使用都要将jquery ui的库引进来，如果在非jquery ui主题风格的场景使用jqgrid就会导致库引入很多却达不到好效果的问题。当然这也是由于jqgrid布局和逻辑耦合不易修改导致的。

其他插件

easy ui的datagrid

ulynlist

网上找到的一个数据网格jquery插件，有数据网格常用基本功能（不具备表格树功能），采用json实现服务器端和浏览器端的交互，使用arttemplate模板引擎制作数据表格模板，具有库文件小（连模板加起来才103.2k）和易于自定义模板的特点。国内开发人员开发。展示一个小demo，

目录树

服务器端

<pre name="code" class="java"><span style="color:#cc7832;"></span>package com.qiaoxiang.controller;

import com.qiaoxiang.po.Experts;
import com.qiaoxiang.po.User;
import com.qiaoxiang.service.ExpertsService;
import com.qiaoxiang.util.FileManager;
import com.qiaoxiang.util.StringUtils;
import com.qiaoxiang.vo.Data;
import com.qiaoxiang.vo.Message;
import com.qiaoxiang.vo.Result;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;

/**
 * Created by baich on 2016/3/30.
 */
@Controller("expertsController")
@RequestMapping("experts")
public class ExpertsController {
    private Logger logger = Logger.getLogger(ExpertsController.class);
    @Resource(name = "expertsService")
    private ExpertsService expertsService;
    /**
     * 分页查询所有记录
     *
     * @param data
     * @return
     */
    @RequestMapping("showAll")
    @ResponseBody
    public String showAllRecoreds(Data data, Huaqiaofigures huaqiaofigures) {
        String result = "{\"status\":true,\"msg\":\"查询成功\",\"data\":{\"list\":[{\"huaqiaoFiguresId\":157,\"name\":\"曾广庇\",\"gender\":1,\"detailTime\":\"1846～1920年\",\"homelandId\":\"47\",\"imigrateTime\":\"1861年\",\"immigratePlaceId\":\"32\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"1465890330536曾广庇.jpg\",\"multimedia\":\"\",\"articleCode\":\"11001705\",\"mate\":\"\",\"matePlace\":\"\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"\",\"informationClerk\":1,\"recoredTime\":\"2016-06-14 15:45:30\"},{\"huaqiaoFiguresId\":156,\"name\":\"陈嘉瑞\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"0\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"14002301\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":152,\"name\":\"王文博\",\"gender\":1,\"detailTime\":\"1902-1972年\",\"homelandId\":\"108\",\"imigrateTime\":\"1920年\",\"immigratePlaceId\":\"2\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"11001301\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":148,\"name\":\"苏诗琳\",\"gender\":0,\"detailTime\":\"\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"0\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"14002501\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":143,\"name\":\"杜四端\\r\\n\",\"gender\":1,\"detailTime\":\"1859-1940\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"0\",\"huaqiaoBriefIntroduction\":\"四端对祖国和家乡的公益事业也非常热心，凡地方应兴应革或救灾需要资金，他都解囊捐献。1912年，他为潮汕水灾等募救灾赈款，成绩显著。\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"11001720\",\"mate\":\"曾氏，郭氏，梅氏，冯氏\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":9,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":134,\"name\":\"蔡逸人\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"116\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"14005502\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"1032\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":129,\"name\":\"陈永进\",\"gender\":1,\"detailTime\":\"1916-2001年\",\"homelandId\":\"77\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"2\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"11001714\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":125,\"name\":\"魏毓辉\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"61\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"14003501\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":121,\"name\":\"苏旭明\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"98\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"115\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"苏旭明.jpg\",\"multimedia\":\"\",\"articleCode\":\"14001701\",\"mate\":\"周美满\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":117,\"name\":\"陈锡耀\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"0\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"0\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"10006902\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":7,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":113,\"name\":\"郑年锦\",\"gender\":1,\"detailTime\":\"1931年-\",\"homelandId\":\"143\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"0\",\"huaqiaoBriefIntroduction\":\"郑年锦（1931- ） 印度尼西亚华人企业家。 <br />  \\r\\n　　生于印尼万隆市，少年在当地华侨学校读书，18岁时到雅加达其叔父的店中帮忙，学习经商，1957年创办了爪哇邦加有限公司，1961年与其兄弟等一起创办达雅.曼努卡尔纺织厂有限公司，自任总经理；1969年，他的企业与日本三井公司、日本钢铁公司合资在三宝垅创办富米拉有限公司，生产建筑材料锌板片，这是印尼首批与外资联营的企业之一； <br />  \\r\\n　　到九十年代，该公司的日本股权已由他完全收购。七十年代郑年锦与其合伙人共同创办了一批纺织企业，在此基础上组成阿尔戈.曼努卡尔集团，在印尼全国建立了广泛的经营销售网络，成为印尼纺织厂及服装企业最大的原料供应商，并向世界各地38个国家和地区输出其产品；该集团同时经营钢铁金属工业，其所属公司成为印尼最大的钢铁企业之一；此外，郑年锦及其企业还先后独资或合资创建经营房地产企业、家禽养殖业、种植园、轻工业、电子工业、商业贸易公司等。至九十年代初，阿尔戈.曼努卡尔集团已成为东南亚50名最大企业中的第九位。<br />  \\r\\n<br />  \\r\\n华侨大学厦门校区图书馆就是郑先生捐建的，改图书馆以其名字命名：“郑年锦图书馆”。\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"10006901\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":7,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":109,\"name\":\"黄克立\",\"gender\":1,\"detailTime\":\"1910-2004年\",\"homelandId\":\"101\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"44\",\"huaqiaoBriefIntroduction\":\"黄克立1910年(庚戌年)8月15日出生于古城泉州，青年时代在厦门大学学习6年。因为陈嘉庚对其才智和见解颇为赏识，所以毕业后陈嘉庚即委任他为厦门大学会计主任。<br />  \\r\\n1937年日军全面侵华，国家有难，匹夫有责。当时正值壮年的黄克立没有离开这块热土，始终活跃在闽南的抗日前线上，为抗战做了大量的工作。<br />  \\r\\n抗战胜利以后，在国民政府供职的黄克立入选中国政府代表团，参加日本向中国交还台湾的仪式。随后，黄克立因精通国语、英语和闽南语，留在当地参加台湾光复后的重建工作，先后担任台湾省长官公署财政处副处长和台中市市长。当时的黄克立年仅35岁。<br />  \\r\\n20世纪50年代后，黄克立与马来西亚殷商合作，创办香港海外信托银行，出任副董事长兼常务董事，并任香港工商银行副董事长、泛印集团及澳门国际银行副董事长等职。20世纪60年代后期，黄克立又向证券和工业进军，1969年创办永固纸业有限公司和大正证券有限公司，出任董事长。<br />  \\r\\n在香港事业有成，黄克立更是积极在内地投资，促进祖国经济发展。不仅如此，从商海第一线退下来的黄克立更关心国家大事，特别是祖国的统一大业。<br />  \\r\\n早在20世纪80年代，黄克立就获邀担任全国政协常委至今。他对祖国内地改革开放事业，尤其是财政金融、文化教育及海峡两岸关系缓和等方面颇为关注，时有精辟的言论。他还是香港回归的积极推动者之一，以其在商界的地位，多次向中央提出中肯意见，支持特首工作，为香港回归做出卓越贡献。<br />  \\r\\n1997年7月2日，黄老与徐四民等被首批授予香港特别行政区最高荣誉勋章——大紫荆勋章。<br />  \\r\\n2004年5月1日，黄克立先生在香港病逝，享年95岁。\",\"picture\":\"黄克立.jpg\",\"multimedia\":\"\",\"articleCode\":\"14005304\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":105,\"name\":\"叶式礼\",\"gender\":1,\"detailTime\":\"\",\"homelandId\":\"140\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"139\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"\",\"multimedia\":\"\",\"articleCode\":\"14004502\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":97,\"name\":\"陈子兴\",\"gender\":1,\"detailTime\":\"1946-\",\"homelandId\":\"134\",\"imigrateTime\":\"\",\"immigratePlaceId\":\"61\",\"huaqiaoBriefIntroduction\":\"\",\"picture\":\"陈子兴.jpg\",\"multimedia\":\"\",\"articleCode\":\"14003702\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":2,\"recoredTime\":\"\"},{\"huaqiaoFiguresId\":92,\"name\":\"陈永栽\",\"gender\":1,\"detailTime\":\"1934年7月17日-\",\"homelandId\":\"117\",\"imigrateTime\":\"1945年\",\"immigratePlaceId\":\"116\",\"huaqiaoBriefIntroduction\":\"1934年7月17日陈永栽出生于福建晋江市，4岁跟着父母到菲律宾谋生。刚满11岁时，陈永栽不得不在一家烟厂当杂役，开始人生的第一步。1965年，在马尼拉的一所房子里，陈永栽和当年在烟厂的朋友，创办了“福川”烟厂。1968年，一场突如其来的台风摧毁了福川烟厂的厂房，大部分设备被毁，这让陈永栽决定彻底改变落后的制烟设备，把世界先进的制烟生产线和现代化卷烟机引进菲律宾。如今，福川烟厂已发展成为菲律宾最大的香烟制造公司，并占据菲律宾7成以上的香烟市场份额，在欧美、日本和中东的香烟市场上都有一席之地。<br />  \\r\\n陈永栽<br />  \\r\\n陈永栽<br />  \\r\\n房地产不能算是陈永栽的主业，但从房地产的投资和运作中，却可以更多地看到陈永栽的魄力和智慧。<br />  \\r\\n裕景兴业集团是陈永栽财团在香港设立的全资子公司，在香港一直专注于高端地产市场的开发，如香港知名的“裕景花园”、“嘉文花园”、“西九龙中心”等均属裕景兴业开发的顶级物业。虽然裕景兴业在中国内地房地产界不为人熟知，但早在十多年前，陈永栽就开始在内地拓展房地产业务。<br />  \\r\\n2005年8月，裕景兴业位于上海的第一个房地产项目——位于陆家嘴中央商务区的裕京国际商务广场竣工，并以2．5万元/平方米的均价首日销售额超过亿元大关，陈永栽布局内地房地产的雄心才引起大众的注意。1993至1994年中国房地产市场泡沫逐渐腾起之时，正是陈永栽在中国进行土地储备的一个集中期，当时为买地总共花了3亿多美元。悄无声息之下，陈永栽在内地的土地储备总量多达200万平方米以上，总投资额约50亿元。<br />  \\r\\n裕景兴业接下来将启动中国内地5个城市的10个房地产开发项目，项目总投资额将超出200亿元人民币。这个金额几乎相当于CEPA签订之后，香港新鸿基在内的数家大地产公司宣布在上海增资开放房产的投资总量。不知不觉中，陈永栽已经完成了全面布局中国内地房地产业务。<br />  \\r\\n总资产编辑<br />  \\r\\n前身名为普通银行的联盟银行是陈氏于1977年收购，现已成为菲国第八大商业银行。他所统辖的香港富景集团，近年也积极在中国的厦门、武汉、上海等地投资。其他海外资产方面，在美国拥有海洋银行，在新几内亚拥有种植场、畜牧场、炼钢厂，而在关岛则拥有超过全岛土面积1%的土地，以及面包厂和游乐场。据估计，陈永栽的财产超过40亿元。<br />  \\r\\n福布斯排行榜编辑<br />  \\r\\n《福布斯》杂志2004年9月公布东南亚40名富豪，70岁的陈永栽以16亿美元资产列第12位，为菲律宾首富。\",\"picture\":\"陈永栽.jpg\",\"multimedia\":\"\",\"articleCode\":\"10009002\",\"mate\":\"\",\"matePlace\":\"0\",\"huaqiaoStatus\":\"\",\"sociationCode\":\"0\",\"informationClerk\":7,\"recoredTime\":\"\"}],\"currentPage\":1,\"totalNum\":48,\"linesPerPage\":15}}";
        return result;
    }
}


浏览器段




<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <!--<link href="../../css/style.css" rel="stylesheet" type="text/css"/>-->
    <link href="../../css/style.css" rel="stylesheet" type="text/css"/>

    <script src="../../common/ulynlist/jQuery/jquery-1.9.1.min.js"></script>
    <script src="../../common/ulynlist/artTemplate/template-simple.js"></script>
    <script src="../../common/ulynlist/ulynlist/ulynlist.js"></script>
    <script src="../../common/ulynlist/ulynlist/ulynlist.table.js"></script>
    <script src="../../common/ulynlist/ulynlist/ulynlist.pagebar.js"></script>
    <script src="../../common/layer/layer.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var opts = {
                basePath: "/jimeiqiaoxiang/admin/common/ulynlist/ulynlist",
                url: "/jimeiqiaoxiang/experts/showAll.do",
                tableColumn: {
                    title: "专家信息",
                    keyColumn: "",
                    columns: [
                        {field: 'expertsId', label: '专家编号', className: "sortable"},
                        {field: 'expertName', label: '姓名', className: "sortable"},
                        {
                            field: 'gender', label: '性别', className: "sortable",
                            tableTransFunc: function (value) {
                                if (value == "1") {
                                    return "男"
                                } else if (value == "0") {
                                    return "女";
                                }
                            }
                        },
                        {field: 'expertBirthday', label: '出生时间', className: "sortable"},
                        {field: 'expertBirthplace', label: '出生地', className: "sortable"},
                        {field: 'expertEmplorer', label: '工作单位', className: "sortable"},
                        {field: 'expertProfesisonTitle', label: '职称', className: "sortable"},
                        {field: 'expertResearchArea', label: '研究领域', className: "sortable"},
                        {field: 'expertRelevantWorks', label: '研究著作', className: "sortable"},
                        {field: 'picture', label: '图片', className: "sortable"},
                        {field: 'awards', label: '获奖情况', className: "sortable"},
                        {field: 'sociationCode', label: '华侨社团', className: "sortable"},
                        {field: 'informationClerk', label: '录入人代码', className: "sortable"},
                        {field: 'recoredTime', label: '录入时间', className: "sortable"},
                        {
                            field: '', label: '操作区',
                            bodyContent: '<a href="####" onclick="deleteRecored(\'[expertsId]\');">删除</a>  <a href="####" onclick="updateRecored(\'[expertsId]\');">修改</a>'
                        }
                    ],

                    rownumbers: true,
                },

                requestData: {linesPerPage: 15}
            }

            $("#ulyn-table-id").ulynlist(opts);
            $("#query-btn").click(function () {
                $.fn.ulynlist.queryForm($("#ulyn-table-id"), $("#query-form"), opts);
            });
        });

    </script>

</head>
<body>

<div id="ulyn-table-id"></div>
<div id="ulyn-pageBar-id"></div>

</body>
</html>




页面效果






总结


jqgrid 适合应用于和jquery ui集成开发的场景，具有相同的ui风格，能够使界面较为和谐。在非jquery ui主题风格的场景个人认为还是不要使用jqgrid，一方面是依赖的库较多，另一方面是布局和风格修改比较麻烦，推荐使用ulynlist。


参考文章


基本使用:




http://www.cnblogs.com/huozhicheng/archive/2012/11/11/2765610.html


添加操作列：




http://bbs.csdn.net/topics/390780388
				


				
时间： 2024-10-06 20:58:29 

		


		


	

	
	

		


		
jqgrid使用分析的相关文章


								

		

			

                jqGrid源码分析（一）
			

		

		

									

				废话少说,先上grid.base.js 总体结构图 各位亲们,注重看下$.jgrid.extend方法,jqGrid所有公开的参数和方法都是通过这个实现的. 说下这里jgrid的源码组织太凌乱,模块切分略粗,如果发现bug不宜每个人实施解决,光grid.base.js就几千行,建议作者重构grid,不怕文件多,就怕模块切分不够细,一到扩展就鸡肋! 有几个小的注意事项 * 必须使用table来初始化 * 不能用于IE的兼容模式 * rowid编号从1开始,不是从0开始 #变量说明 * $t,t:t			

		

	

				

		

			

                比较JqGrid与XtraGrid
			

		

		

									

				此只能比较两者的功能优劣,实现某种功能.效果的方便性和效率.首先分别粗略介绍XtraGrid和jqGrid DevExpress是目前.net下最为强大和完整的UI控件库, XtraGrid是这个控件库中重要的控件之一.在XtraGrid中集成了大量的高级特征,所以使用它进行开发的人员只需要对其属性进行简单的设置或编 写少量的代码,就能创建出十分美观的界面,从而使开发的工作效率大幅提高. 特点如下 完全支持ADO.NET,一闪而过的数据装入速度,XtraGrid充分利用内建的ADO.NET功能.			

		

	

				

		

			

                jqgrid使用sql row_number进行分页
			

		

		

									

				背景 系统中使用了jqgrid的展示,现在要处理10w+的数据量 现状 使用了全查询的,查询到了10w+的数据放到了datatable中,每次页面刷新需要9秒多,并且传递给另一个dll来处理一些事情.偶尔会出现StackOverFlow的异常问题,但是频率较大. 分析 现有的就有两个问题需要解决: 性能问题 StackOverFlow的异常问题 起始 性能问题经过调查,sql语句查询完成之后至少4秒钟左右,因为是全查询,所以把尽力的条件都做了,效果不明显. 然后考虑用sql server的row			

		

	

				

		

			

                使用jqgrid的C#/asp.net mvc开发者的福音 jqgrid-asp.net-mvc
			

		

		

									

				你是否使用jqgrid? 你是否想在C#/asp.net mvc中使用jqgrid? 那你很可能曾经为了分析jqgrid的request url用fiddler忙活了2个小时.(如果你要使用jqgrid的search功能的话) 那你很可能为了jqgrid的CRUD和search功能写了几百行C#代码.还不确定有没有bug. 如果你有如上的痛苦经历,那么 jqgrid-asp.net-mvc就是你的福音拉. jqgrid-asp.net-mvc是一个host在github的C#开源项目.它在git			

		

	

				

		

			

                JIRA、Jira client和jqGrid实践
			

		

		

									

				团队的成员碰到一个问题,使用JIRA建立多个有关联性的任务时,过于耗时.所以花了3天时间,间断地看了一下Jira官方文档和网上的资料.下面总结一下Jira API的使用. Jira develop 文档中提到了其对rest风格api的支持,同时也支持SOAP的调用.我们采用 Jira rest API的方式进行调用,链接中有各种调用方式,可以细细看一下. 首先思考一下我们要做什么,可以归纳为以下几点: 一个Jira的访问接口 一个Jira访问参数的封装 一个Jira返回结果的解析器 一套业务需求			

		

	

				

		

			

                页面上有两个jqGrid表格时，冲突问题
			

		

		

									

				如果一个页面上存在多个jqGrid,发现当刷新每一个表格的时候,其实都是第一个表格进行刷新. 当点击第二个表格分页的时候,第一个表格出现刷新,读取中..... 分析jqGrid源码发现: loadDiv = $("#load_"+$.jgrid.jqID(this.p.id)),  通过控制loadDiv 来控制读取中....的呈现状态.而针对loadDiv的选择器是跟jqgrid的id有关. 仔细分析出现这种问题的跟jqgrid对象对应的table有关: 1.未遵循ID选择器唯一性.			

		

	

				

		

			

                jqgrid 数据交互
			

		

		

									

				see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data 本文给出jqgrid和laravel的Eloquent 数据交互接口. 1. json访问格式 通过http://localhost:8000/json去获取数据,在请求的时候,还会加上一些默认参数. http://localhost:8000/json?_search=false&nd=1422412397217&rows=10&page=			

		

	

				

		

			

                分页后的数据展示问题分析
			

		

		

									

				一.重要参数rowNum和rowList 在使用jqGrid框架进行数据展示的时候.我们经常会用到初始化参数中的rowNum和rowList.一个表示展示的记录数,一个表示可选的展示记录数.具体参数请参考官方文档,http://blog.mn886.net/jqGrid/. 二.分页后的数据展示问题分析 一般情况下,当我们将查询条件所需的参数传递给后台,返回给jqGrid框架展示的数据就是我们经过后台处理需要得到的数据. 但是,当我们涉及到多表的数据获取和展示时,有一种情况会造成我们需要获取的数			

		

	

				

		

			

                jqGrid(&#39;setSelection&#39;,rowid)报Cannot read property &#39;multiple&#39; of undefined
			

		

		

									

				项目组非要上jeeweb框架,用jqgrid+大量iframe做为前端框架,臃肿不堪. 今天上午,在进行选定操作jqGrid('setSelection',rowid)报Cannot read property 'multiple' of undefined,怎么分析也找不出原因,最后百度搜了一下竟然有许多哥们遇到过类似的问题. 原因是我的select标签需要动态加载option,所以我没有写dict这个属性(为了后面动态生成),谁知jqgrid框架就报错,不得已只有给一个dict的默认字典,虽