用于后台管理的列表数据控件：DataGrid和Select

常听人说不喜欢javascript。然而我一个一直用C#做后端的人，最喜欢的编程语言就是javascript了，我接收它的优点，也接收它的缺点！

前段时间接触过easyui，用过里面的DataGrid和Combobox等控件，感觉DataGrid的确减少了一些重复的工作，但是easyui改变原有的Element，比如textbox，不能用$("#id").val()获取值了，只能用$(“#id”).textbox('getValue')来获取，不喜欢这样。国庆放假，票到3号了，今天有时间就根据使用easyui的感觉写了两个数据控件DataGrid和Select。

先看看最后结果和前段代码：

HTML:

文章类型：
<div class="input-control select">
    <select id="type" data-url="/home/TypeList"></select>
</div>

<div class="input-control text" style="width:300px;">
    <input type="text" placeholder="请输入关键字" id="keyword" />
    <button class="button" onclick="search()"><span class="mif-search"></span></button>
</div>

<table id="tblist" class="table border bordered" data-url="/home/PageData">
    <thead>
        <tr>
            <th data-field="$index"></th>
            <th data-field="ID">编号</th>
            <th data-field="Title">标题</th>
            <th data-field="Type" data-url="/home/TypeList">类型</th>
            <th data-field="Author">作者</th>
            <th data-field="AddTime">添加时间</th>
            <th data-field="_operator" data-formatter="operateFormatter">操作</th>
        </tr>
    </thead>
</table>

JavaScript:

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/js/data-widget.js"></script>
    <script>
        var dg = new dw.DataGrid($('#tblist'));
        var type = new dw.Select($("#type"));
        function search() {
            dg.search({ keyword: $("#keyword").val(), type: $("#type").val() });
        }
        function operateFormatter(value, item) {
            return '<a href="##" onclick="alert(' + item.ID + ')">修改</a>';
        }
    </script>

 

---

Select数据控件:

id为type的select元素上有个data-url的属性，这个表示加载数据的地址，这个地址必须返回一个拥有ID和Name属性的对象数组的json格式，如下：

[{ID: 1, Name: "类型1"}, {ID: 2, Name: "类型2"}, {ID: 3, Name: "类型3"}, {ID: 4, Name: "类型4"},…]

在实例化dw.Select对象的时候，第一个参数是select元素的jquery对象，上面用$('type')得到，第二个是可选参数，说明如下：

{
    value: undefined,      // 加载过数据选中的值
    onInit: undefined,     // 初始化完成后执行的函数，用加载的数据作为参数
    hasDefault: true,      // 是否有默认选项
    defaultName: '请选择',  // 默认选项显示名
    defaultID: ''          // 默认选项值
}

DataGrid数据控件：

id为tblist的table元素可有三个自定义属性：

• data-url : 要加载数据的后台地址；
• data-page-size : 每页显示多少条数据，默认是10，会作为查询参数的pageSize；
• data-page-index : 加载时显示第几页，默认是1，会作为查询参数的pageIndex（可能永远也用不到，感觉默认值1很合理......）；

data-url后台地址返回的格式应该如下：

{
    PageCount :  100  //总页数 --int,
    PageIndex :  1    //当前页 --int,
    List : [
         {ID:1,  Title : '标题1'  ,AddTime : "/Date(1332919782070)/" },
         ......
    ]                // 分页数据列表---Array
}

在实例化dw.DataGrid对象的时候，第一个参数是table元素的jquery对象，上面用$('tblist')得到，第二个是查询参数，可选。

在thead里定义表头，每个th表示一列，th可有四个自定义属性：

• data-field:返回数据列表的对象属性名，必须；
• data-formatter : 该列的格式化器，用于修改这列数据的显示形式，比如性别是bool，可以显示成“男”或“女”，比如上面例子中_operator列，虽然不对应任何字段，但是可以显示自定义的内容
• data-format : 目前用于日期格式（“/Date(1332919782070)/”）的字符串(注意是字符串类型，但是是日期格式)，默认值是：“yyyy-MM-dd hh:mm”
• data-url : 用于从ID映射成对应的Name，比如文章列表的文章类型Type返回的是类型ID，可以提供这个url返回数据，控件自动映射成类型名称，从html大号字的两个地方可以看出，地址和Select的data-url是一样的。

DataGrid对象有个search方法，参数是查询参数，用法如上。

注：加红的“查询参数”是指同一个东西，这个参数会加上pageIndex和pageSize一起post到table的data-url地址来查询数据。我用asp.net mvc做的例子中的后台Action方法签名如下：

, )

---

注：Select的data-url和Type列的data-url相同，在内部是有缓存的，所以加载这部分数据的时候用的是同步ajax，从加载效果可以看出只加载了一次，缓存生效了：

data-widget.js依赖jQuery；

data-widget.js源码如下：

;/*
file:        data-widget.js
author:      loogn
date :       2016-10-1
descript:    DataGrid、Select、Pager
*/

var dw = (function () {
    var dw = {};

    //根据url缓存 ，没有的话要同步获取
    dw.cache = {};
    dw.getCache = function (url) {
        var key = url.toLowerCase();
        var data = dw.cache[key];
        if (data) return data;
        $.ajax({
            url: url,
            type: 'POST',
            async: false,
            success: function (result) {
                dw.cache[key] = result;
                data = result;
            }
        });
        return data;
    }

    var styleArr = [];
    //pager.css
    styleArr.push('table .page a{ text-decoration:none; font-weight:normal;}');
    styleArr.push('table .page span{ text-decoration:none; font-weight:normal;}');
    styleArr.push('table .page a:hover{ text-decoration:none;}');
    styleArr.push('table .page{padding: 15px 20px;text-align: left;color: #ccc;}');
    styleArr.push('table .page a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}');
    styleArr.push('table .page span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}');
    styleArr.push('table .page a:hover{text-decoration: none;border: 1px solid #428bca;}');
    styleArr.push('table .page span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}');

    var style = $('<style>').text(styleArr.join(''));
    $('head').append(style);

    //dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
    dw.dateFormat = function (date, format) {
        var o = {
            "M+": date.getMonth() + 1, //month
            "d+": date.getDate(), //day
            "h+": date.getHours(), //hour
            "m+": date.getMinutes(), //minute
            "s+": date.getSeconds(), //second
            "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
            "S": date.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    }

    //得到指定url参数
    dw.getQueryString = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r !== null)
            return unescape(decodeURIComponent(r[2]));
        return null;
    };

    //得到所有url参数对象
    dw.getQueryObject = function () {
        var args = {};
        var query = location.search.substring(1);
        var pairs = query.split("&");
        for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');
            if (pos == -1) continue;
            var name = pairs[i].substring(0, pos);
            var value = pairs[i].substring(pos + 1);
            value = decodeURIComponent(value);
            args[name.toLowerCase()] = value;
        }
        return args;
    };

    return dw;
}());

(function (dwName, dw) {
    function Pager($wrap, pageCount, current, onPageChange) {

        this.$wrap = $wrap;
        this.pageCount = pageCount;
        this.current = current || 1;
        this.onPageChange = onPageChange || function () { };
        this.bindEvent();
        this.render(pageCount, current);

    }

    Pager.prototype.render = function (pageCount, current) {

        this.pageCount = pageCount;
        this.current = current;
        if (pageCount <= 1) {
            this.$wrap.empty();
            return;
        }

        //上一页
        var htmlArr = [];
        if (current > 1) {
            htmlArr.push('<a href="javascript:;" class="prevPage">上一页</a>');
        } else {

            htmlArr.push('<span class="disabled">上一页</span>');
        }
        //中间页码
        if (current != 1 && current >= 4 && pageCount != 4) {
            htmlArr.push('<a href="javascript:;" class="tcdNumber">' + 1 + '</a>');
        }
        if (current - 2 > 2 && current <= pageCount && pageCount > 5) {
            htmlArr.push('<span>...</span>');
        }
        var start = current - 2, end = current + 2;
        if ((start > 1 && current < 4) || current == 1) {
            end++;
        }
        if (current > pageCount - 4 && current >= pageCount) {
            start--;
        }
        for (; start <= end; start++) {
            if (start <= pageCount && start >= 1) {
                if (start != current) {
                    htmlArr.push('<a href="javascript:;" class="tcdNumber">' + start + '</a>');
                } else {
                    htmlArr.push('<span class="current">' + start + '</span>');
                }
            }
        }
        if (current + 2 < pageCount - 1 && current >= 1 && pageCount > 5) {
            htmlArr.push('<span>...</span>');
        }
        if (current != pageCount && current < pageCount - 2 && pageCount != 4) {
            htmlArr.push('<a href="javascript:;" class="tcdNumber">' + pageCount + '</a>');
        }
        //下一页
        if (current < pageCount) {
            htmlArr.push('<a href="javascript:;" class="nextPage">下一页</a>');
        } else {
            this.$wrap.remove('.nextPage');
            htmlArr.push('<span class="disabled">下一页</span>');
        }
        //修改表现
        this.$wrap.html(htmlArr.join(''));
    }

    Pager.prototype.bindEvent = function () {
        var pager = this;
        this.$wrap.on("click", "a.tcdNumber", function () {
            var current = parseInt($(this).text());
            pager.render(pager.pageCount, current);
            if (typeof (pager.onPageChange) == "function") {
                pager.onPageChange(current);
            }
        });
        //上一页
        this.$wrap.on("click", "a.prevPage", function () {
            var current = parseInt(pager.$wrap.children("span.current").text());
            pager.render(pager.pageCount, current - 1);
            if (typeof (pager.onPageChange) == "function") {
                pager.onPageChange(current);
            }
        });
        //下一页
        this.$wrap.on("click", "a.nextPage", function () {
            var current = parseInt(pager.$wrap.children("span.current").text());
            pager.render(pager.pageCount, current + 1);
            if (typeof (pager.onPageChange) == "function") {
                pager.onPageChange(current);
            }
        });
    }

    dw.Pager = Pager;
}('Pager', dw));

(function (dwName, dw) {

    function DataGrid($table, params) {
        this.name = dwName;
        this.$table = $table;         //表格对象
        this.url = $table.data('url');       //加载数据的url
        this.pageSize = $table.data('page-size') || 10;  // 每页大小
        this.pageIndex = $table.data('page-index') || 1; //当前页码
        this.columns = []; //列数据
        this.params = {}; //查询参数
        this.pager = null;//分页控件
        this.isSearch = false;
        var $this = this;

        $table.find('thead>tr>th').each(function () {
            var $th = $(this);
            var field = $th.data('field');
            if (field == "$index") {
                if (!$th.attr("style") || $th.attr("style").indexOf("width") < 0) {
                    $th.css("width", "20px");
                }
            }
            $this.columns.push({ field: field, formatter: $th.data('formatter'), format: $th.data('format'), url: $th.data('url') });
        });
        //分页
        $table.append('<tfoot><tr><td colspan="' + this.columns.length + '" class="page"></td></tr></tfoot>');
        this.load(params);
    }

    //加载数据
    DataGrid.prototype.load = function (params) {
        params = params || {};
        this.params = params;
        params.pageIndex = this.pageIndex;
        params.pageSize = this.pageSize;
        var $this = this;
        $.post(this.url, params, function (data) {
            $this.render(data);
        });
    };
    DataGrid.prototype.search = function (params) {
        this.pageIndex = 1;
        this.isSearch = true;
        this.load(params);
    }

    DataGrid.prototype.render = function (data) {
        var $datagrid = this;

        var html_arr = [];
        html_arr.push('<tbody>');

        for (var i = 0; i < data.List.length; i++) {
            var item = data.List[i];
            html_arr.push('<tr>');

            for (var j = 0; j < $datagrid.columns.length; j++) {
                var column = this.columns[j];
                html_arr.push('<td>');
                if (column.field == "$index") {
                    html_arr.push(this.pageSize * (this.pageIndex - 1) + i + 1);
                } else {
                    var renderValue = getRenderValue(item, column);
                    html_arr.push(renderValue);
                }
                html_arr.push('</td>');
            }
            html_arr.push('</tr>');
        }
        html_arr.push('</tbody>');
        var tbody = $datagrid.$table.find('tbody');
        if (tbody.length > 0) {
            tbody.replaceWith(html_arr.join(''));
            if (this.isSearch) {
                $datagrid.pager.render(data.PageCount, data.PageIndex);
                this.isSearch = false;
            }
        } else {
            $datagrid.$table.append(html_arr.join(''));
            //分页

            this.pager = new dw.Pager($datagrid.$table.find('.page'), data.PageCount, data.PageIndex, function (num) {
                $datagrid.pageIndex = num;
                $datagrid.load($datagrid.params);
            })
        }
    };

    function urlMapping(id, list) {
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            if (id == item.ID) {
                return item.Name;
            }
        }
        return '';
    }

    function getRenderValue(item, column) {
        var val = item[column.field];
        if (column.formatter) {
            return eval(column.formatter + '(val,item)');
        }
        else if (column.url) {
            var list = dw.getCache(column.url);
            return urlMapping(val, list);
        }
        else {
            if (typeof (val) === "string") {
                if (/Date\([\d+]+\)/.test(val)) {
                    var date = eval(val.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
                    val = dw.dateFormat(date, column.format || 'yyyy-MM-dd hh:mm');
                    return val;
                }
            }
            return val;
        }
    }

    dw.DataGrid = DataGrid;

}('DataGrid', dw));

(function (dwName, dw) {
    function Select($select, params) {
        this.name = dwName;
        var args = $.extend({
            value: undefined,
            onInit: undefined,
            hasDefault: true,
            defaultName: '请选择',
            defaultID: ''
        }, params);

        this.$select = $select;
        var url = $select.data('url');

        var list = dw.getCache(url);
        fillSelect(list);

        //[{ID:id,Name:name}]
        function fillSelect(list) {
            var htmlArr = [];
            if (args.hasDefault) {
                htmlArr.push('<option value="' + args.defaultID + '">' + args.defaultName + '</option>');
            }
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                htmlArr.push('<option value="' + item.ID + '">' + item.Name + '</option>');
            }
            $select.html(htmlArr.join(''));
            if (args.value !== undefined) {
                $select.val(args.value);
            }
            if (args.onInit && typeof (args.onInit) === "function") {
                args.onInit(list);
            }
        }
    }

    dw.Select = Select;
}('Select', dw));

data-widget.js