建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

jsGrid.js 轻量级 JQuery 图表插件

来源:易助科技网浏览量:30收藏

简介


jsGrid是基于jQuery的轻量级客户端数据网格插件。它支持基本的网格操作,如插入、过滤、编辑、删除、分页和排序。jsGrid非常灵活,允许自定义其外观和组件。

(下载的附件中附有DEMO)


JQuery轻量级图表插件jsGrid.js



使用


1.  引入文件


<link type="text/css" rel="stylesheet" href="jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="jsgrid-theme.min.css" />

<script type="text/javascript" src="jsgrid.min.js"></script>


说明:还需要引入 jQuery v1.8.3 或更高版本。



2.  HTML


<div id="jsGrid"></div>



3.  调用


<script>
  var clients = [
    { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
    { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
    { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
    { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
    { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
  ];
  
  var countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
    { Name: "Canada", Id: 2 },
    { Name: "United Kingdom", Id: 3 }
  ];
  
  $("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    data: clients,
    fields: [
      { name: "Name", type: "text", width: 150, validate: "required" },
      { name: "Age", type: "number", width: 50 },
      { name: "Address", type: "text", width: 200 },
      { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
      { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
      { type: "control" }
    ]
  });
</script>



4.  配置


config对象可能包含以下选项(下面指定了默认值):



{
    fields: [],
    data: [],

    autoload: false,
    controller: {
        loadData: $.noop,
        insertItem: $.noop,
        updateItem: $.noop,
        deleteItem: $.noop
    },

    width: "auto",
    height: "auto",

    heading: true,
    filtering: false,
    inserting: false,
    editing: false,
    selecting: true,
    sorting: false,
    paging: false,
    pageLoading: false,

    insertRowLocation: "bottom",
    
    rowClass: function(item, itemIndex) { ... },
    rowClick: function(args) { ... },
    rowDoubleClick: function(args) { ... },

    noDataContent: "Not found",

    confirmDeleting: true,
    deleteConfirm: "Are you sure?",

    pagerContainer: null,
    pageIndex: 1,
    pageSize: 20,
    pageButtonCount: 15,
    pagerFormat: "Pages: {first} {prev} {pages} {next} {last}    {pageIndex} of {pageCount}",
    pagePrevText: "Prev",
    pageNextText: "Next",
    pageFirstText: "First",
    pageLastText: "Last",
    pageNavigatorNextText: "...",
    pageNavigatorPrevText: "...",

    invalidNotify: function(args) { ... }
    invalidMessage: "Invalid data entered!",
    
    loadIndication: true,
    loadIndicationDelay: 500,
    loadMessage: "Please, wait...",
    loadShading: true,
    loadIndicator: function(config) { ... }
    loadStrategy: function(config) { ... }

    updateOnResize: true,

    rowRenderer: null,
    headerRowRenderer: null,
    filterRowRenderer: null,
    insertRowRenderer: null,
    editRowRenderer: null,
    pagerRenderer: null
}



相关链接


官网地址 :http://js-grid.com/

Gitee 地址 :https://gitee.com/mirrors/jsgrid

易助科技网效果演示地址 : http://demo.easyzone.net.cn/plugin/jsgrid/demos/index.html