楼下的杂货店搬走了,自己写的Grid组件
分类:技术

  一个朋友的前男友跟他说过这么一句话,“走不到最后那为什么要在一起?”当然这是在他们谈恋爱之前的事,他们坚持了很长一段时间的暧昧,那种悄然心动却不戳破的心悸,最后还是忍不住这种没有安全感的“不完全拥有”,选择了在一起,但很快就分手了,原因不详。

大体没什么变化,主要是添加了一个方法,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)

          “给你,宝宝。”阿姨总是这样叫我们,我都已经习以为常了。

  记得小时候的暧昧是偶然擦肩而过的紧张,是夜晚互发短信的捂嘴偷笑,想说的话一再斟酌有没有过了那个界限却又想让对方感觉小小的心动,发着让对方对号入座的动态却都是别人问着什么情况,看到对方说着微微心动的话却装作看不懂。

 

          我把微信支付凭证给阿姨看了一眼,转身要走,阿姨却叫住了我。

  后来是不经意的body contact,随意的捏一下你的脸,拍拍你的头,捋一下你被风吹乱的头发,上高处是拽你的手,过马路时看到车后拥你的腰快步走,乃至后来更多的接触,让你脸红心跳却又装作淡定,心里有种说不出的羞涩和愉悦。

      “宝宝加个微信吧。”阿姨略带些请求的看着我,我点点头。扫码的瞬间,阿姨说她以后就不在这卖了,她要搬到家属楼了,以后再要吃东西她就给我们送来。

  有的人把暧昧当做谈恋爱的必经之路,有的人把暧昧当做生活的调味品。前者又想暧昧又想恋爱,后者只想暧昧不想恋爱。后者就是人们口中的“中央空调”“人渣”,最少的付出却让生活不枯燥,胆小的只是地下工作者却不接头一样的靠网络工具保持联系,胆大的得到的是下半身思考的人最终的目的,这时和长期炮友没有太大的区别,不过因为了解可以保证不得病的概率却要付出一些甜言蜜语。

      我有些局促,不知道该说些什么。点了绿色的发送键后,给阿姨挥了挥手,小声的说了句拜拜。

  说到这里要标注一下,所说的都没有特指男的,男女都一样,人渣不分性别。

      刚烤好的肠热乎乎的,爆出了皮,一口咬下去,有些皮的劲道,又满口留香。以后阿姨走了,依照我那么懒得性子,可能再也吃不到这么好吃的肠了。

  在那个恋爱还需要父母之命媒妁之言的年代,暧昧是年轻男女互相表达心意的途径,怕被发现不得不费尽心思想怎么让对方了解自己的心意,两个人像对暗号一样你一言我一语,像是拉大锯一样你一推我一搡,就这么来来去去的就私订下了对方是一生的伴侣。

        回到寝室,爬到床上。把脚伸进暖和的被窝,拯救一下我被冻傻掉的冷神经。寝室特别的安静,因为只有我一个人。

本文由奥门金沙网址发布于技术,转载请注明出处:楼下的杂货店搬走了,自己写的Grid组件

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文