JQuery UI Sortable非常适用于没有间隙的列表,但是我想要渲染一个带有间隙的项目列表,例如
1,2,空,4,5,6,空,8
其中数字代表插槽号.然后预期的行为是,如果用户在2槽上拖动一个元素,则将2值推送到空槽3,并且用户可以将新元素放入2槽中,而如果它们将新元素拖过2槽.空3个插槽,列表项不会按下,用户可以将新项目放入空的3个插槽中.希望这是有道理的.
我一直在看JQuery UI可排序代码,似乎我需要利用更改并接收回调以实现这一点,但是,对于JQuery/JS一般来说,我不清楚使用什么添加这些空插槽占位符并管理选择列表,以便我不会破坏自定义代码的排序功能.
任何指针,示例等都将非常感激.
在敲了一会儿之后,我创造了一个jsFiddle:http://jsfiddle.net/pdHnX/
为了帮助解释这个问题.我相信我想要完成的所有事情都可能发生在被重写的_rearrange方法中.小提琴代码处理项目正在替换填充项目的情况,但是存在一个奇怪的问题,如果您将项目列表中的项目拖动到填充列表,则删除该项目,然后在填充列表中拖动相同的项目,填充列表缩小1,这是一个问题.
一旦开始将更多项目拖动到填充列表中,就会出现更多问题,但这是我目前遇到问题的地方.
我在Sencha论坛上发布了这个帖子,想在这里发布以防万一:
我有一个使用PagingToolbar和CheckboxSelectionModel的GridPanel.我想跟踪跨页面的选择.我差不多了,但是我遇到了PagingToolbar控件(例如下一页)在我的选择模型上触发'selectionchange'事件的问题.
这是我的代码的简化示例:
码:
var sm = Ext.create('Ext.selection.CheckboxModel', {
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
console.log("Selection Change!!");
// CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
store: store,
defaults: {
sortable:true
},
selModel: sm,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
listeners: {'beforerender' : {fn:function(){
store.load({params:params});
}}}
});
store.on('load', function() {
console.log('loading');
console.log(params);
console.log('selecting...');
var records = this.getNewRecords();
var recordsToSelect = getRecordsToSelect(records);
sm.select(recordsToSelect, true, true);
});
我假设我可以选择加载事件的记录而不触发任何事件.
这里发生的是在更改数据页面时触发selectionchange事件,我不希望发生这种情况.理想情况下,只有用户点击才会被跟踪为"selectionchange"事件,而不是任何其他组件的事件冒泡并在我的选择模型上触发事件.查看源代码,我可以看到在PagingToolbar上触发的唯一事件是"更改".我试图按照GridPanel,TablePanel,Gridview等处理它的方式,但我只是没有看到事件的路径.即使这样,我也不确定如何抑制从PagingToolbar到SelectionModel的事件.
先谢谢你,汤姆
我正在使用ExtJS的GridPanel库来呈现具有用于选择的CheckboxModel的行列表.还有一个摘要行,它汇总了所有选定的数据,并将其显示在GridPanel底部的一行中.这个代码是:
var sm = Ext.create('Ext.selection.CheckboxModel', {
/////////
// With large number of rows ... this takes forever
/////////
grid.getView().refresh();
/////////
/////////
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
// Do stuff
}
}
});
var selSumFn = function(column, selModel){
return function(){
var records = selModel.getSelection(),
result = 0;
//console.log("records:" + records.length);
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
};
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: store,
defaults: {
sortable:true
},
selModel: sm, …