JS - DataGrid - 表格插件

Ly.js

c_main.php

<!DOCTYPE>
<html>
<head>
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="Ly/resource/css/Ly.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="Ly/Ly.js"></script>
    <script type="text/javascript" src="Ly/DataGrid.js"></script>
</head>
<body>
<?php
    $keyword = isset($_REQUEST['keyword'])?$_REQUEST['keyword']:"";
?>
<form id="search-form" method="get" action="main.php">
    <input type="text" name="keyword" value="<?php echo $keyword;?>">
    <input type="button" value="搜索" onclick="search()">
</form>
<script>
    function search(){
        $('#search-form').submit();
    }
</script>
<div id="container">
    <!--表格插件容器-->
</div>
<script>
//表格插件
var datagrid;
//搜索關鍵詞
var keyword = '<?php echo $keyword;?>';
//數據總數
var rsCount;
//每頁顯示條數
var pageSize;
//當前頁數
var currentPage = 1;
//總頁數
var pageCount;
//排序類型
var orderType;
//排序字段
var orderField;
//表格容器
var container = Ly.get('container');
//表格配置
var DGconfig = { };
//設置列標題
var CMconfig = [
    {
        name   :  'id',
        events :  {
            onclick  :  function(obj){
                orderType = obj;
                orderField = 'id';
                order(orderType, orderField);
            }
        }
    },
    {
        name   :  '分類編碼',
        events :  { }
    }
    ,
    {
        name   :  '分類名稱',
        events :  { }
    }
    ,
    {
        name   :  '分類操作',
        events :  { }
    }
];
//設置單元格樣式
var GMconfig = [
    { style  :  'text-align:center;' },
    { style  :  'text-align:center;' },
    { style  :  'text-align:center;' },
    { style  :  'text-align:center;' }
];
//獲取分頁頁數信息
Ly.Ajax.request({
    method   :  'post',
    charset  :  'utf-8',
    async    :  true,
    url      :  'c_page.php',
    params   :  { keyword  :  keyword },
    success  :  function (data) {
        //將接受到的字符串拆分爲數組
        var dataPage = data.split(',');
        //總數
        rsCount = dataPage[0];
        //每頁頁數
        pageSize = dataPage[1];
        //總頁數
        pageCount = dataPage[2];
        //獲取數據
        datagrid_data();
    }
});
//獲取數據
function datagrid_data() {
    Ly.Ajax.request({
        method   :  'post',
        charset  :  'utf-8',
        async    :  true,
        url      :  'c_data.php',
        params   :  {
            pageSize  :  pageSize,
            keyword   :  keyword
        },
        success  :  function (data) {
            //加載數據
            datagrid_load(data);
        }
    });
}
//實例化插件
datagrid = new Ly.DataGrid(container, DGconfig);
//加載表格插件
function datagrid_load() {
    //設置列標題
    datagrid.columnModel(CMconfig);
    //設置單元格樣式
    datagrid.gridModel(GMconfig);
    //綁定數據
    datagrid.bind(getData(data));
    //配置翻頁工具條
    var PTBconfig = {
        position    :  'bottom',
        //數據總數
        rsCount     :  rsCount,
        //每頁顯示條數
        pageSize    :  pageSize,
        currentPage :  1,
        //總頁數
        pageCount   :  pageCount,
        themes      :  'default',
        behavior    :  function (currentPage) {
            Ly.Ajax.request({
                method   :  'post',
                charset  :  'utf-8',
                async    :  true,
                url      :  'c_data.php',
                params   :  {
                    currentPage  :  currentPage,
                    keyword      :  keyword
                },
                success  :  function (data) {
                    //更新數據
                    datagrid.update(getData(data));
                }
            });
        }  
    }
    //添加翻頁工具條
    datagrid.pagingToolBar(PTBconfig);
    //渲染插件
    datagrid.render();
}
//排序
function order(orderType, orderField) {
    Ly.Ajax.request({
        method   :  'post',
        charset  :  'utf-8',
        async    :  true,
        url      :  'c_data.php',
        params   :  {
            currentPage  :  currentPage,
            keyword      :  keyword,
            orderType    :  orderType,
            orderField   :  orderField
        },
        success  :  function (data) {
            datagrid.updatePagingToolBar({
                position    :  'bottom',
                //數據總數
                rsCount     :  rsCount,
                //每頁顯示條數
                pageSize    :  pageSize,
                currentPage :  1,
                //總頁數
                pageCount   :  pageCount,
                themes      :  'default'
            });
            datagrid.update(getData(data));
        }
    });
}
//數據轉化
function getData(value) {
    var arr1, arr2, data = [];
    //把接收到的字符串拆分爲數組
    arr1 = value.split('|');
    for (var i=0;i<arr1.length;i++) {
        arr2 = arr1[i].split('-');
        if (arr2[0] != '') {
            data.push([
                arr2[0],
                arr2[1],
                arr2[2],
                "<a href='modc,php?cid="
                + arr2[1]
                + "'>修改</a>"
                + " | "
                + "<a href='delc.php?cid="
                + arr2[1]
                + "' onclick='if(confirm(&quot;確認要刪除數據?&quot;)) return true;else return false;'>刪除</a>"
            ]);
        } else {
            data.push([
                '',
                '',
                '未查詢到信息',
                ''
            ]);
        }
    }
    return data;
}
</script>
</body>
</html>

c_page.php

<?php
$keyword = isset($_REQUEST['keyword'])?$_REQUEST['keyword']:'';
$uuid = $_COOKIE['uuid'];
$sql = " SELECT count(*) FROM classify WHERE uuid = '".$uud."' ";
if ($keyword != '') {
    $sql .= " AND name like '%".$keyword."%' ";
}
$count = mysql_query($sql);
$counts = mysql_fetch_assoc($count);
//數據總數
$counts = $counts['count(*)'];
//每頁頁數
$pageSize = 5;
//總頁數
$pageCount = ceil($counts/$pageSize);
echo $counts.",".$pageSize.",".$pageCount;

c_data.php

<?php
$keyword = isset($_REQUEST['keyword'])?$_REQUEST['keyword']:'';
$currentPage = isset($_REQUEST['$currentPage'])?$_REQUEST['$currentPage']:1;
//每頁數量
$pagesizes = isset($_REQUEST['pageSize'])?$_REQUEST['pageSize']:5;
$orderType = isset($_REQUEST['orderType'])?$_REQUEST['orderType']:'DESC';
$orderField = isset($_REQUEST['orderField'])?$_REQUEST['orderField']:'id';
$uuid = $_COOKIE['uuid'];
$sql = " SELECT id, cid, name FROM classify WHERE uuid = '".$uuid."' ";
if ($keyword != '') {
    $sql .= " AND name like '%".$keyword."%' ";
}
//偏移量
$offset = ($currentPage - 1)*$pagesizes;
$limit = " LIMIT ".$offset.", ".$pagesizes;
$order = " ORDER BY ".$orderField." ".$orderType;
$sql .= $order.$limit;
$arr = strQuery($sql);
echo $arr;
/**
 * @param $sql
 * @return string
 */
function strQuery($sql){
    $sql = mysql_query($sql);
    $result = array();
    while ($row = mysql_fetch_assoc($sql)) {
        $result[] = $row;
    }
    $str = "";
    foreach ($result as $key => $val) {
        $str = $str.implode('-', $val).'|';
    }
    $data = substr($str, 0, strlen($str)-1);
    return $data;
}

爲什麼備注都是繁體的,因爲我在linux上敲的代碼,輸入法裏的中文就是繁體的。

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论