自己写的Grid组件，第二版

Posted 2020-09-08 没追求的码农

大体没什么变化，主要是添加了一个方法，getSelectedItems(),返回当前选中的数据项。

(function ($) {
    $.fn.GridView = function (setting) {
        var _self = this
        // 私有变量-展示列表的数量,已选中的数量
        var listCount = 0
        var selectedCount = 0

        // data
        _self.sourceData = []

        // 随机值，用于标识dom的id
        var rand = Math.floor(Math.random() * 1000)

        // 私有变量-doms
        var wrapper = $(‘<tbody id="tbody‘ + rand + ‘"></tbody>‘)
        var cbSelectAll

        // 配置项-是否显示分页，是否支持多选，table的样式，pager的样式
        var isPager = !!setting.isPager
        var isMulti = !!setting.isMulti
        var listClass = setting.listClass ? setting.listClass : ‘‘
        var apiUrl = setting.apiUrl ? setting.apiUrl : ‘‘
        var columns = setting.columns ? setting.columns : ‘‘
        var value_column = setting.valueColumn || null

        // 配置项-几个回调函数1、ajax请求前的回调，2、dom渲染完成的回调，3、点击数据行时的回调
        var onBeforeSend = (setting.onBeforeSend && $.isFunction(setting.onBeforeSend)) ? setting.onBeforeSend : null
        var onError = (setting.onError && $.isFunction(setting.onError)) ? setting.onError : null
        var onDataBindComplete = (setting.onDataBindComplete && $.isFunction(setting.onDataBindComplete)) ? setting.onDataBindComplete : null
        var onRowClick = (setting.onRowClick && $.isFunction(setting.onRowClick)) ? setting.onRowClick : null
        var pager = null

        // 配置项-1、ajax加载完成，对数据源进行加工的函数，2、ajax请求之前获取查询参数的函数
        var sourceConverter = (setting.sourceConverter && $.isFunction(setting.sourceConverter)) ? setting.sourceConverter : null
        var searchParamsGetter = (setting.searchParamsGetter && $.isFunction(setting.searchParamsGetter)) ? setting.searchParamsGetter : null

        // dom事件绑定
        function addSingleRowClickEventListener() {
            wrapper.on(‘click‘, ‘tr‘, function () {
                var that = $(this)
                if (that.hasClass(‘selected‘)) {
                    that.removeClass(‘selected‘)
                    selectedCount = 0
                    if (onRowClick) {
                        var item = _self.sourceData[that.index()]
                        if (item) onRowClick(item, false)
                    }
                } else {
                    that.addClass(‘selected‘).siblings().removeClass(‘selected‘)
                    selectedCount = 1
                    if (onRowClick) {
                        var item = _self.sourceData[that.index()]
                        if (item) onRowClick(item, true)
                    }
                }
            })
        }

        function addMultiRowClickEventListener() {
            wrapper.on(‘click‘, ‘tr‘, function () {
                var that = $(this)
                if (that.hasClass(‘selected‘)) {
                    that.removeClass(‘selected‘).find(‘:checkbox‘).prop(‘checked‘, false)
                    selectedCount--
                    cbSelectAll.prop(‘checked‘, false)
                    if (onRowClick) {
                        var item = _self.sourceData[that.index()]
                        if (item) onRowClick(item, false)
                    }
                } else {
                    that.addClass(‘selected‘).find(‘:checkbox‘).prop(‘checked‘, true)
                    selectedCount++
                    if (selectedCount === listCount) {
                        cbSelectAll.prop(‘checked‘, true)
                    }
                    if (onRowClick) {
                        var item = _self.sourceData[that.index()]
                        if (item) onRowClick(item, true)
                    }
                }
            })
            cbSelectAll.on(‘click‘, function () {
                var that = $(this)
                if (that.prop(‘checked‘)) {
                    wrapper.find(‘:checkbox‘).prop(‘checked‘, true).parent().parent().addClass(‘selected‘)
                    selectedCount = listCount
                } else {
                    wrapper.children(‘tr‘).removeClass(‘selected‘).find(‘:checkbox‘).prop(‘checked‘, false)
                    selectedCount = 0
                }
            })
        }

        // 初始化控件-构造html等
        function init() {
            if (!columns) return console.log(‘未提供数据列‘)
            if (!apiUrl) return console.log(‘未提供api路径‘)

            var table = $(‘<table‘ + (listClass ? ‘ class="‘ + listClass + ‘"‘ : ‘‘) + ‘ id="myGV_‘ + rand + ‘"></table>‘)
            var thead = ‘<thead>‘
            if (columns) {
                if (isMulti) {
                    thead += ‘<th class="chk"><input type="checkbox" id="cbAll‘ + rand + ‘" /></th>‘
                } else {
                    thead += ‘<th class="no"></th>‘
                }

                $.each(columns, function (idx, col) {
                    thead += ‘<th>‘ + col.title + ‘</th>‘
                })
                thead += ‘<th></th>‘
                thead += ‘</thead>‘
            }
            table.append($(thead))
            table.append(wrapper)
            _self.append(table)
            cbSelectAll = $(‘#cbAll‘ + rand)
            _self.fun = new Function(‘data‘, renderFunString())
            if (isMulti) {
                addMultiRowClickEventListener()
            } else {
                addSingleRowClickEventListener()
            }
            if (isPager) {
                pager = new Pager(_self, setting.pageSize || 20)
                pager.addEventListener(
                    function () {
                        _self.show()
                    })
            }
        }

        // 插入数据
        function addRowsToTbody() {
            if (_self.sourceData && _self.sourceData.length > 0) {
                var html = _self.fun(_self.sourceData)
                wrapper.html(html)
            } else {
                var colCount = columns.length + 2
                wrapper.html("<tr class=‘empty‘><td colspan=‘" + colCount + "‘>请求的数据为空</td></tr>")
            }
        }

        function getAjaxData() {
            var param
            if ($.isFunction(searchParamsGetter)) {
                param = searchParamsGetter()
            }
            if (isPager) {
                if ($.isArray(param)) {                                             // $("form").serializationArray()
                    param.push({ ‘name‘: ‘pageSize‘, ‘value‘: pager.pageSize })
                    param.push({ ‘name‘: ‘pageIndex‘, ‘value‘: pager.pageIndex })
                } else if ($.isPlainObject(param)) {                                 // 自定义查询对象
                    $.extend(true, param, { ‘pageSize‘: pager.pageSize, ‘pageIndex‘: pager.pageIndex })
                } else {                                                             // $("form").serialization()
                    param = (param ? param + ‘&‘ : ‘‘) + ‘pageSize=‘ + pager.pageSize + ‘&pageIndex=‘ + pager.pageIndex
                }
            }
            return param || {}
        }

        // 渲染函数
        function renderFunString() {
            var funString = ‘var self = this; var html = ""; $.each(data, function(idx, item) { ‘
            funString += ‘html += "<tr>"; html += self.setFirstCol(idx + 1);‘
            $.each(columns, function (idx, item) {
                if (item.func) {
                    funString += ‘ html += self.setCol( ‘ + item.func + ‘(item), ‘ + item.width + ‘, "‘ + item.cssClass + ‘", "");‘
                } else {
                    funString += ‘ html += self.setCol( item.‘ + item.column + ‘, ‘ + item.width + ‘, "‘ + item.cssClass + ‘", "");‘
                }
            })
            funString += ‘ html += self.setLastCol(); html += "</tr>" }); return html;‘
            return funString
        }

        // 渲染第一列
        _self.setFirstCol = function (val) {
            if (isMulti) {
                return ‘<td class="chk"><input type="checkbox"></td>‘
            } else {
                return ‘<td class="no">‘ + val + ‘</td>‘
            }
        }

        // 渲染最后一列
        _self.setLastCol = function () {
            return ‘<td></td>‘
        }

        // 渲染中间列
        _self.setCol = function (content, width, cssClass, level) {
            var html = ‘<td‘
            html += width ? ‘ style="width:‘ + width + ‘px"‘ : ‘‘
            html += cssClass && cssClass !== ‘undefined‘ ? ‘ class="‘ + cssClass + ‘"‘ : ‘‘
            html += ‘>‘

            html += content && content !== ‘undefined‘ ? content : ‘‘
            html += ‘</td>‘
            return html
        }

        function Pager(wrapper, pagesize, cssClass) {
            this.pageSize = pagesize || 20
            this.pageCount = 0
            this.recordCount = 0
            this.pageIndex = 1

            var pagerDom = $(‘<div class="pager"></div>‘)
            wrapper.append(pagerDom)
            var buttonWrapper = $(‘<div class="buttons"></div>‘)
            var info = $(‘<div class="info"></div>‘)
            pagerDom.append(buttonWrapper)
            pagerDom.append(info)
            var firstBtn = $(‘<a class="disabled"><i class="fa fa-fast-backward"></i></a>‘)
            buttonWrapper.append(firstBtn)
            var prevBtn = $(‘<a class="disabled"><i class="fa fa-backward"></i></a>‘)
            buttonWrapper.append(prevBtn)
            var nextBtn = $(‘<a class="disabled"><i class="fa fa-forward"></i></a>‘)
            buttonWrapper.append(‘<b>第</b>‘)
            var currentInput = $(‘<input value="1" type="text" maxlength="4" />‘)
            buttonWrapper.append(currentInput)
            buttonWrapper.append(‘<b>页</b>‘)
            buttonWrapper.append(nextBtn)
            var lastBtn = $(‘<a class="disabled"><i class="fa fa-fast-forward"></i></a>‘)
            buttonWrapper.append(lastBtn)

            this.addEventListener = function (fn) {
                var that = this
                firstBtn.on(‘click‘, function () {
                    if ($(this).hasClass(‘disabled‘)) return
                    that.pageIndex = 1
                    currentInput.val(that.pageIndex)
                    fn(that)
                })
                prevBtn.on(‘click‘, function () {
                    if ($(this).hasClass(‘disabled‘)) return
                    if (that.pageIndex > 1) {
                        that.pageIndex--
                    } else {
                        that.pageIndex = 1
                    }
                    currentInput.val(that.pageIndex)
                    fn(that)
                })
                nextBtn.on(‘click‘, function () {
                    if ($(this).hasClass(‘disabled‘)) return
                    that.pageIndex++
                    if (that.pageIndex > that.pageCount) {
                        that.pageIndex = that.pageCount
                    }
                    currentInput.val(that.pageIndex)
                    fn(that)
                })
                lastBtn.on(‘click‘, function () {
                    if ($(this).hasClass(‘disabled‘)) return
                    that.pageIndex = that.pageCount
                    currentInput.val(that.pageIndex)
                    fn(that)
                })
                currentInput.on(‘change‘, function () {
                    var v = Number($(this).val())
                    if (!v || v < 0 || v > that.pageCount) return $(this).val(that.pageIndex)
                    that.pageIndex = v
                    currentInput.val(that.pageIndex)
                    fn(that)
                })
            }

            this.setPager = function (total, start) {
                this.recordCount = total
                this.pageCount = Math.ceil(this.recordCount / this.pageSize)
                firstBtn.removeClass(‘disabled‘)
                prevBtn.removeClass(‘disabled‘)
                nextBtn.removeClass(‘disabled‘)
                lastBtn.removeClass(‘disabled‘)
                if (this.pageIndex === 1) {
                    firstBtn.addClass(‘disabled‘)
                    prevBtn.addClass(‘disabled‘)
                }
                if (this.pageIndex === this.pageCount) {
                    nextBtn.addClass(‘disabled‘)
                    lastBtn.addClass(‘disabled‘)
                }
                var msg = ‘共计‘ + this.recordCount + ‘条记录，每页显示‘ + this.pageSize + ‘条，共‘ + this.pageCount + ‘页，用时‘ + (new Date().getTime() - start) + ‘毫秒‘
                info.html(msg)
            }
        }

        // 开放接口-获取选中的数据，如果没有选中项，返回null；如果有选中项，多选，返回项目数组，单选，返回一个数据项
        // 获取数据
        _self.show = function (index, type) {
            if (!apiUrl) {
                return
            }
            _self.sourceData = []
            var start = new Date().getTime();
            if (!type || type.toLowerCase() !== ‘post‘) {
                $.get(apiUrl, getAjaxData(), function (data) {
                    if (sourceConverter && $.isFunction(sourceConverter)) {
                        _self.sourceData = sourceConverter(data.body)
                    } else {
                        _self.sourceData = data.body
                    }
                    addRowsToTbody()
                    if (isPager) {
                        pager.setPager(data.totalCount, start)
                    }
                })
            } else {
                $.post(apiUrl, getAjaxData(), function (data) {
                    if (sourceConverter && $.isFunction(sourceConverter)) {
                        _self.sourceData = sourceConverter(data.body)
                    } else {
                        _self.sourceData = data.body
                    }
                    addRowsToTbody()
                    if (isPager) {
                        pager.setPager(data.totalCount, start)
                    }
                })
            }
        }

        _self.get = function () {
            var start = new Date().getTime();
            _self.sourceData = []
            listCount = 0
            $.ajax({
                url: apiUrl,
                data: getAjaxData(),
                type: ‘GET‘,
                contentType: ‘JSON‘,
                onBeforeSend: function () {
                    if (onBeforeSend && $.isFunction(onBeforeSend)) onBeforeSend()
                },
                success: function (data) {
                    _self.sourceData = (sourceConverter && $.isFunction(sourceConverter)) ? sourceConverter(data.body) : data.body
                    addRowsToTbody()
                    if (isPager) pager.setPager(data.totalCount, start)
                    if (onDataBindComplete && $.isFunction(onDataBindComplete)) onDataBindComplete()
                },
                error: function () {
                    if (onError && $.isFunction(onError)) onError()
                }
            })
        }

        _self.post = function () {
            _self.sourceData = []
            var start = new Date().getTime();
            listCount = 0
            $.ajax({
                url: apiUrl,
                data: getAjaxData(),
                type: ‘POST‘,
                contentType: ‘JSON‘,
                onBeforeSend: function () {
                    if (onBeforeSend && $.isFunction(onBeforeSend)) onBeforeSend()
                },
                success: function (data) {
                    _self.sourceData = (sourceConverter && $.isFunction(sourceConverter)) ? sourceConverter(data.body) : data.body
                    addRowsToTbody()
                    if (isPager) pager.setPager(data.totalCount, start)
                    if (onDataBindComplete && $.isFunction(onDataBindComplete)) onDataBindComplete()
                },
                error: function () {
                    if (onError && $.isFunction(onError)) onError()
                }
            })
        }

        _self.getSelectedItems = function () {
            if (selectedCount === 0) return null
            if (isMulti) {
                var result = []
                $.each(wrapper.children(‘tr.selected‘), function (idx, item) {
                    result.push(_self.sourceData[$(item).index()])
                })
                return result
            } else {
                var idx = wrapper.children(‘tr.selected‘).first().index()
                return _self.sourceData[idx]
            }
        }

        _self.getSelectedId = function () {
            var items = _self.getSelectedItems()
            if (!items) return null
            if (!isMulti) {
                if (value_column) {
                    return items[value_column]
                } else {
                    return null
                }
            } else {
                if (items.length == 0) return null;
                if (value_column) {
                    return items[0][value_column];
                } else {
                    return null;
                }
            }
        }

        init()
        return _self
    }
})(jQuery)