dsclgrid.js v1.02 Released.

super grid table for jQuery.

Download .zip Download .tar.gz View on GitHub

Powerd by www.dosancole.com
→ スマホでの列の行表示切替に対応した簡便なjqueryテーブルはこちら( dscltable.js 姉妹品)

dsclgrid.js is a multi-functional table(fixed table head and side) for jQuery.

go to explanation of simple edit(sorry, only japanese.)
go to detailed explanation(sorry, only japanese.)

Features

In the development of Web applications business system, there is a scene we want to represent a large table (was used in Excel).

dsclgrid.js is a multi-functional table with the following features were intended to be used in Web applications business system.

fixed table head and side ( fixed header ).
collaboration server by Ajax.
pager.
multistage sort.
select row.
quick edit.

*“dscl” of “dsclgrid” is the abbreviation of account name(dosancole).

Sample View

This sample is a fixed table head and side, collaboration server by Ajax, pager, multistage(3) sort, select row. (The data from server is static, pager and sorter does not work.)

Change Log

v1.02 2016.9.24 NEW!
- Minor additions.
v1.01 2012.12.20
- autosize=true/pager=false bug fix.
v1.0 2012.12.12
- initial parameter(autosize) added.
- getUserparam method added.
- stable version (that worked for one year in the real project).
v0.5
- first public version.

Required

IE9,8,7 FF, Chrome
jquery-1.6,x,1.8.x, jquery-ui-1.8.x

*dsclgird.js can be run on most browsers.

Quick Start

We will try to display a simple table(fixed head and side). In advance, please extract the files that you downloaded.

First, please prepare the following html file. *Url(css and javascript, data.json), please fixe by location.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="web/css/superTables.css" />
    <link rel="stylesheet" type="text/css" href="web/css/dsclgrid.css" />
    <link rel="stylesheet" type="text/css" href="web/css/jqueryui/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="web/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="web/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="web/js/superTables.js" ></script>
    <script type="text/javascript" src="web/js/dsclgrid.js" ></script>
    <title>dsclgrid.js sample 000</title>
    <script type="text/javascript">

$(function(){
    $('#sample000').dsclgrid({
        titlebar: false,
        method: "GET",
        width: "400px",
        height: "200px",
        url: "data.json",
        fixedCols : 2,
        model : [
            {display: 'user name', name : 'name',    width: 100, align: 'left'  },
            {display: 'number',    name : 'number',  width: 80,  align: 'center'},
            {display: 'address',   name : 'depart',  width: 150, align: 'left'  },
            {display: 'age',       name : 'age',     width: 50,  align: 'right' },
            {display: 'comment',   name : 'comment', width: 200, align: 'left'  }
        ]
    });
    $('#sample000').dsclgridLoad();
});

    </script>
</head>
<body style="font-size:15px;">
    <div id="sample000"></div>
</body>
</html>

Next, prepare data.json.

{
    "offset" : 0,
    "page"   : 1,
    "rows"   : [
        { "cell" : ["sato",     "0001","tokyo Japan",    "20", "comment."] },
        { "cell" : ["suzuki",   "0002","hokkaido Japan", "45", "comment."] },
        { "cell" : ["takahashi","0003","okinawa Japan",  "25", "comment."] },
        { "cell" : ["tanaka",   "0004","kanagawa Japan", "35", "comment."] },
        { "cell" : ["watanabe", "0005","osaka Japan",    "30", "comment."] },
        { "cell" : ["ito",      "0006","sendai Japan",   "22", "comment."] },
        { "cell" : ["nakamura", "0007","aomori Japan",   "49", "comment."] },
        { "cell" : ["yamamoto", "0008","nagoya Japan",   "52", "comment."] },
        { "cell" : ["kobayashi","0009","toyama Japan",   "23", "comment."] },
        { "cell" : ["saito",    "0010","shimane Japan",  "32", "comment."] }
    ],
    "total"  : 10
}

The following can be displayed. *If you want to see in the Chrome of the local environent, you need to start the --allow-file-access-from-files option.

In the way, we were able to easily load data from the server!

####In addition…####