全冠清
- 浏览: 52474 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
山寨表格组件
分享到：
评论
6 楼
全冠清
2013-12-12
inputDom.effect('highlight', {
color: '#900'
}, 500, function() {
inputDom.effect('highlight', {
color: '#900'
}, 500)
}).focus()
5 楼
全冠清
2013-09-10
jsonp
jsonp = (url)->
_href = window.location.href
if _href.indexOf('https://') is 0
url = url.replace('http://','https://')
methodName = 'jsonp' + Math.random().toString(36).substring(2)
data = null
callbackChain=[]
window[methodName] = (callbackData)->
data=callbackData
for m in callbackChain
m(data)
return
url=url.replace('callback=?','callback='+methodName)
script = document.createElement( 'script' )
script.setAttribute( 'src', url )
script.setAttribute( 'charset', "utf-8" )
document.getElementsByTagName( 'head' )[0].appendChild(script)
return {
done:(fun)->
if(data)
fun(data)
callbackChain.push(fun)
return
}
4 楼
全冠清
2013-09-05
var List=function(options){
var defaults={data:{},getData:function(){return {}},async:true,fixPageParam:$.noop}
var setting = $.extend(true, defaults, options)
var self =this;
self.itemList=[]
self.container=$(setting.container)
self.expData={}
var currentPage=0
self.getSetting=function(){
return setting
}
self.load=function(init){
if(setting.beforeLoad){
setting.beforeLoad()
}
var param=$.extend(true,{},setting.data,self.expData,setting.getData())
if(init){
param['init']=true
}
if(setting.page){
param.pos=self.page.pos
param.range=self.page.range
setting.fixPageParam(param,self.page)
}
if(setting.testData){
callBack(setting.testData)
}else{
$.ajax({
url:setting.url,
async:setting.async,
cache:false,
dataType: "json",
data:param
}).done(callBack)
}
function callBack(data){
if(setting.onLoad){
setting.onLoad(data)
}
self.itemList=[]
self.container.empty()
if(init){
self.total=data.totalItem
if(setting.page){
self.page.flush()
}
}
$.each($.isArray(data)?data:data.stores,function(i,j){
var item=new setting.Model(i,j)
item.pos=i
self.itemList.push(item)
self.container.append(item.dom)
})
if(setting.afterLoad){
setting.afterLoad(self)
}
}
}
self.flush=function(pageNum){
self.page.init(pageNum)
self.load(true)
}
self.reset=function(){
self.page.first=true
self.load(true)
}
var Page=function(){
var page=this
page.init=function(cPage){
page.first=true
currentPage=cPage||0
if(setting.page){
this.pos=setting.page.pos||0;
this.range=setting.rowList||20
};
}
page.init()
page.flush=function(cPage){
if(cPage){
currentPage = cPage
}else{
currentPage = 0
}
var totalPage=Math.ceil(parseInt(self.total) / (setting.rowList || 20))
self.totalPage = totalPage
if((totalPage-1) <= currentPage){
currentPage=totalPage-1
}
if(parseInt(self.total) > (setting.rowList || 20)){
$(setting['page']['container']).pagination(totalPage, {
current_page: currentPage,
items_per_page: 1,
num_edge_entries: 2,
num_display_entries: 5,
prev_text: "上一页",
next_text: "下一页",
callback: function(i){
currentPage=i
if (!page.first) {
if(setting.onPage){
setting.onPage(i)
}
page.pos = (i) * (setting.rowList || 20)// + 1
self.load()
}
page.first=false
}
})
}else{
$(setting['page']['container']).empty()
}
}
}
self.page=new Page()
self.load(true)
}
3 楼
全冠清
2013-08-14
scrollable=(opts)->
defaults={vertical:false}
setting={}
result={}
(->(setting[x]=item for x,item of defaults);return)()
(->(setting[x]=item for x,item of opts);return)()
if setting.vertical
pDim = 'top'
pSize = setting.container.offsetHeight
else
pDim = 'left'
pSize = setting.container.offsetWidth
operateDom = setting.container.children[0]
animate = new Animate()
index=0
currentVal=0
targetVal=0
animate.step = (progress)->
distance = targetVal - currentVal
operateDom.style[pDim] = - (currentVal + distance * progress) + 'px'
return
animate.complete = ()->
currentVal = targetVal
# operateDom.style[pDim] = -currentVal + 'px'
return
result.seekTo = (i)->
animate.stop()
targetVal = i * pSize
animate.start()
index = i
if setting.onSeek
setting.onSeek()
return
result.onSeek = (fun)->
setting.onSeek=fun
return
result.getIndex = ()->
index
result
window.scrollable = scrollable
2 楼
全冠清
2013-08-14
#coffeescript
class Animate
constructor:(options={})->
@options = options
options.duration = options.duration or 300
self = this
self.easing =
swing: (p, n, firstNum, diff) ->
((-Math.cos(p * Math.PI) / 2) + 0.5) * diff + firstNum
linear: (p, n, firstNum, diff) ->
firstNum + diff * p
start : ->
options=@options
self=this
self.startTime = +new Date
self.interval = setInterval(->
action = self.step or option.step
t = +new Date
n = t - self.startTime
if n < options.duration
self.state = n / options.duration
self.pos = self.easing[options.easing or "swing"](self.state, n, 0, 1, options.duration)
action self.pos
else
clearInterval self.interval
# when open new tab the interval will seted to 1000ms in chrome and firefox
action 1
complete = self.complete or options.complete
complete() if complete
return
, 13)
return
stop : ->
options=@options
self=this
clearInterval self.interval if self.interval
onStop = self.onStop or options.onStop
onStop() if onStop
return
isIE = /msie/i.test(navigator.userAgent)
traverseChildren = (elem)->
pushAll = (elemArray) ->
q.push item for item in elemArray
children = [];
q = [];
q.push(elem);
while q.length > 0
elem = q.pop();
children.push(elem);
pushAll(elem.children);
return children;
mouseoutEvent = (event,dom,callback)->
elem = event.toElement || event.relatedTarget
list = traverseChildren(dom)
if elem in list
return;
callback()
return
appendEvent = (dom, event, fun) ->
if isIE
dom.attachEvent("on" + event, fun)
else
dom.addEventListener(event, fun, false)
return
hasClass = (ele,cls)->
if not ele
return
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))
addClass = (ele,cls)->
if not ele
return
if not hasClass(ele,cls) then ele.className += " "+cls
return
removeClass = (ele,cls)->
if not ele
return
if hasClass(ele,cls)
reg = new RegExp('(\\s|^)'+cls+'(\\s|$)')
ele.className=ele.className.replace(reg,' ')
return
getDomIndex = (e)->
i=0
while e.previousSibling
e=e.previousSibling
if(e.nodeType is 1)
i=i+1
return i
jsonp = (url)->
_href = window.location.href
if _href.indexOf('https://') is 0
url = url.replace('http://','https://')
methodName = 'jsonp' + Math.random().toString(36).substring(2)
data = null
callbackChain=[]
window[methodName] = (callbackData)->
data=callbackData
for m in callbackChain
m(data)
return
url=url.replace('callback=?','callback='+methodName)
script = document.createElement( 'script' )
script.setAttribute( 'src', url )
script.setAttribute( 'charset', "utf-8" )
document.getElementsByTagName( 'head' )[0].appendChild(script)
return {
done:(fun)->
if(data)
fun(data)
callbackChain.push(fun)
return
}
window.Animate = Animate
window.isIE = isIE
window.traverseChildren = traverseChildren
window.mouseoutEvent = mouseoutEvent
window.appendEvent = appendEvent
window.hasClass = hasClass
window.addClass = addClass
window.removeClass = removeClass
window.getDomIndex = getDomIndex
window.jsonp = jsonp
1 楼
全冠清
2013-07-16
var List=function(options){
var defaults={data:{},getData:function(){return {}},async:true,fixPageParam:$.noop}
var setting = $.extend(true, defaults, options)
var self =this;
self.itemList=[]
self.container=$(setting.container)
self.expData={}
var currentPage=0
self.getSetting=function(){
return setting
}
self.load=function(init){
if(setting.beforeLoad){
setting.beforeLoad()
}
var param=$.extend(true,{},setting.data,self.expData,setting.getData())
if(init){
param['init']=true
}
if(setting.page){
param.pos=self.page.pos
param.range=self.page.range
setting.fixPageParam(param,self.page)
}
if(setting.testData){
callBack(setting.testData)
}else{
$.ajax({
url:setting.url,
async:setting.async,
cache:false,
dataType: "json",
data:param
}).done(callBack)
}
function callBack(data){
if(setting.onLoad){
setting.onLoad(data)
}
self.itemList=[]
self.container.empty()
if(init){
self.total=data.totalItem
if(setting.page){
self.page.flush()
}
}
$.each($.isArray(data)?data:data.stores,function(i,j){
var item=new setting.Model(i,j)
item.pos=i
self.itemList.push(item)
self.container.append(item.dom)
})
if(setting.afterLoad){
setting.afterLoad(self)
}
}
}
self.flush=function(){
self.page.init()
self.load(true)
}
self.reset=function(){
self.page.first=true
self.load(true)
}
var Page=function(){
var page=this
page.init=function(){
page.first=true
currentPage=0
if(setting.page){
this.pos=setting.page.pos||0;
this.range=setting.rowList||20
};
}
page.init()
page.flush=(function(cPage){
return function(){
var totalPage=Math.ceil(parseInt(self.total) / (setting.rowList || 20))
if((totalPage-1) <= currentPage){
currentPage=totalPage-1
}
if(parseInt(self.total) > (setting.rowList || 20)){
$(setting['page']['container']).pagination(totalPage, {
current_page: currentPage,
items_per_page: 1,
num_edge_entries: 2,
num_display_entries: 5,
prev_text: "上一页",
next_text: "下一页",
callback: function(i){
currentPage=i
if (!page.first) {
if(setting.onPage){
setting.onPage()
}
page.pos = (i) * (setting.rowList || 20)// + 1
self.load()
}
page.first=false
}
})
}else{
$(setting['page']['container']).empty()
}
}
})();
}
self.page=new Page()
self.load(true)
}
function MadeList(dateRange){
$.template('t1', '<tr>' +
'<td rowspan="2">' +
'${state_date}' +
'</td>' +
'<td>' +
'商品推荐栏' +
'</td>' +
'<td>${goods_uv}</td>' +
'<td>${goods_click_uv}</td>' +
'<td>${goods_click_cnt}</td>' +
'<td>${goods_income}</td>' +
'<td rowspan="2">${total_income}</td> ' +
'</tr>' +
'<tr>' +
'<td>' +
'电商频道' +
'</td>' +
'<td>${waterfall_uv}</td>' +
'<td>${waterfall_click_uv}</td>' +
'<td>${waterfall_click_cnt}</td>' +
'<td>${waterfall_income}</td>' +
'</tr>')
var setting = {
container: 'table.grid tbody',
rowList: 10,
url:'../../DataAnalysis/stat/!promo.action?__='+(+new Date),
fixPageParam:function(param,p){
param.limit=param.pos
delete param.pos
},
getData: function(){
return {
start: dateRange.getStart(),//setting.global.dateRange.getStart(),
end: dateRange.getEnd()
}
},
Model: function(i, item){
var self = this
item.goods_uv=window.BfdWidget.format.int(item.goods_uv)
item.goods_click_uv=window.BfdWidget.format.int(item.goods_click_uv)
item.goods_click_cnt=window.BfdWidget.format.int(item.goods_click_cnt)
item.goods_income=window.BfdWidget.format.money(item.goods_income)
item.total_income=window.BfdWidget.format.money(item.total_income)
item.waterfall_uv=window.BfdWidget.format.int(item.waterfall_uv)
item.waterfall_click_uv=window.BfdWidget.format.int(item.waterfall_click_uv)
item.waterfall_click_cnt=window.BfdWidget.format.int(item.waterfall_click_cnt)
item.waterfall_income=window.BfdWidget.format.money(item.waterfall_income)
self.dom = $.tmpl('t1', item)
// i % 2 == 0 ? null : self.dom.addClass('color')
// self.dom.data('item',item)
},
// testData: {
// "stores": [{}, {}, {}, {}],
// "totalItem": 50
// },
page: {
container: '#grid > ul'
}
}
var list = new List(setting)
dateRange.addEventListener(function(){
list.reset()
})
}
function madeList(index,opts){
var result
var setting={
container: '.section:eq('+index+') > table > tbody',
rowList:10,
beforeLoad:function(){
$.ifmWidget("loading",{
title:'加载中',
content:'加载中...'
})
$('.section:eq('+index+') > table th input:checkbox').prop('checked',false)
},
afterLoad:function(){
$.ifmWidget("unloading")
},
Model: function(i, item){
var self = this
var url = item.url
item.img_url=item.img_url+'?'+(+new Date)
item.uri = (url.indexOf("?") > 0 && url.indexOf("?") < url.indexOf("/", 7)) ? url.substring(url.indexOf("?") + 1, url.length) : url.substring(url.indexOf("/", 7), url.length)
self.dom = $.tmpl('t'+index, item)
i % 2 == 0 ? null : self.dom.addClass('color')
self.dom.data('item',item)
},
page: {
container: '.section:eq('+index+') > ul'
},
onPage:function(){
$('.section:eq('+index+') > table th:eq(0) :checkbox').attr('checked',false)
}
}
result= new List($.extend(setting,opts))
return result
}
发表评论
相关推荐
它提供了丰富的组件库，包括表格、面板、菜单、工具栏等，以及强大的数据绑定和布局管理功能。 在JavaScript设计中，以下几个关键知识点是必不可少的： 1. **面向对象编程**：JavaScript虽然是一种原型继承的语言...
在.NET框架中，DataGridView控件是用于显示和编辑表格数据的标准组件。然而，原生的DataGridView控件并不直接支持折叠功能。"可折叠datagridview控件"是指通过自定义扩展或第三方库实现的，能够在数据显示时进行折叠...
“类Excel”功能通常意味着这个PB应用程序包含了一些与Excel相似的界面元素和交互方式，比如表格布局、排序、过滤等。在PB中实现这样的功能可能需要以下步骤： 1. 设计数据窗口：创建一个数据窗口对象，用于展示数据...
简介： ...网页是一门技术，更讲究艺术，没有绝对的山寨与抄袭，更多的，是不断的探索学习和借鉴，国内的设计应该有更多更适应国内需求的探索，因此有了dsure这个CSS开发框架，喜欢的童鞋尽情下载。
Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,媒体网络,山寨QQ,Java聊天程序 Java编写的山寨QQ，多人聊天+用户在线，程序分服务端和客户端，典型C/S结构， 当用户发送第一次请求的时候，验证...
[TablePanel.java] 日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件...
[TablePanel.java] 日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...
[TablePanel.java] 日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...
[TablePanel.java] 日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...
Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,媒体网络,山寨QQ,Java聊天程序 Java编写的山寨QQ，多人聊天+用户在线，程序分服务端和客户端，典型C/S结构， 当用户发送第一次请求的时候，验证...
Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,媒体网络,山寨QQ,Java聊天程序 Java编写的山寨QQ，多人聊天+用户在线，程序分服务端和客户端，典型C/S结构， 当用户发送第一次请求的时候，验证...