jqgrid使用分析

时间：2016-07-25 07:04:49 阅读：859 评论：0 收藏：0 [点我收藏+]

标签：

简述

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>

页面效果