自己写的Grid组件，第二版
2024-10-20 08:42:09
大体没什么变化，主要是添加了一个方法，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)
最新文章
- Mysql 变量使用
- 《30天自制操作系统》18_day_学习笔记
- 第三百二十三天 how can I 坚持
- SQL Server系统表和常用函数（转）
- Android SDK下载和更新失败的解决方法！！！
- Linux用户和用户组
- Spring Boot Memory Performance
- mysql存储过程及经常使用函数
- php 两个文件之间的相对路径的计算方法
- [SOJ] connect components in undirected graph
- oracle自己主动维护
- C# 全选中数字文本框内容
- ubuntu权限管理常用命令
- 项目实战4—HAProxy实现高级负载均衡实战和ACL控制
- centOS7防火墙关闭失败问题
- siege 高并发测试工具
- PropertiesUtil 获取文件属性值
- pfSense 2.4.3 发布，包含重要的安全修复补丁
- 用vue-cli来搭建vue项目和webpack
- 算法(4) Rotate Image
热门文章
- UVA10518 How Many Calls? —— 矩阵快速幂
- 扩散（diffusion）和弥散（dispersion）有什么区别
- Android记录程序崩溃Log写入文件
- nginx: error while loading shared libraries: libGeoIP.so.1
- 使用 WinSCP（下载） 上文件到 Linux图文教程
- TypeError: Unexpected keyword argument passed to optimizer: amsgrad原因及解决办法
- TX2上yolov3精度和速度优化方向
- 洛谷P1967货车运输——倍增LCA
- Linux下的RTC子系统
- jq之鼠标事件