我确信这很简单,通常都是.
$('#sort-table').tableDnD({
onDragClass: "dnd_drag",
onDragStart: function(table, row) {
console.log("start drag");
},
onDrop: function(table, row) {
console.log($.tableDnD.serialize());
},
dragHandle: ".dragHandle"
});
Run Code Online (Sandbox Code Playgroud)
我有上面的代码用于tableDnD,jQuery表排序插件.这是它们提供的样本的确切代码,但是当我在表中删除项目时,它不会正确触发onDrop事件.我在控制台中没有得到任何回应.该表初始化,拖动句柄正常工作,所以我至少知道代码的一部分是正确的.我唯一无法工作的是onDrop命令.
更新:
我更新了上面的代码,添加了一个onDragStart和onDragClass,两者都工作正常,只有onDrop函数失败.
这是我的一般表格布局:
<table id="sort-table">
<tbody class="sort-items">
<tr class="1">
<td class="dragHandle"></td>
...
</tr>
...
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud) 在jquery数据表中,我可以禁用特定的列排序依据
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0, 7]
}]
Run Code Online (Sandbox Code Playgroud)
任何人都知道如何在角度JS中做到这一点?
<table class="custom-table" datatable="ng" dt-options="dtOptions" id="contacts-list-table">
</table>
myApp.controller("ListCtr", ['DTOptionsBuilder', function(DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip')
}])
Run Code Online (Sandbox Code Playgroud)
这段代码隐藏了我的搜索栏,但无法隐藏我的第一列和第四列的排序功能?
我正在使用Google图表.我想改变图表中的条形颜色.所以使用系列风格我改变了条形颜色.但同时我想根据条形颜色更改Legend指示灯颜色.但我无法更改图例指示灯颜色.请帮我.
这是图表代码:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart3);
function drawChart3() {
var data = google.visualization.arrayToDataTable([
['Priority', 'Resolution(%)',{ role: 'annotation' },'ESL(%)',{ role: 'annotation' },{ role: 'style' }],
['P1', <%=P1_PERCENT %>,<%=P1_PERCENT%>,95,95,'color: #fcb441' ],
['P2', <%=P2_PERCENT%>,<%=P2_PERCENT%>,95,95,'color: #fcb441' ],
['P3 & P4', <%=P3_P4_PERCENT%>,<%=P3_P4_PERCENT%>,90,90,'color: #fcb441' ]
]);
var options = {
tooltip:{textStyle:{fontName:'"Arial"'}},
title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
vAxis: {minValue:0},
legend:{position: 'bottom'},
chartArea:{width:'88%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('g4'));
chart.draw(data, options);
}
Run Code Online (Sandbox Code Playgroud)
我得到这样的图表

嗨我有问题与我用于bootstrap 3.0.3的表单向导
它实际上工作但下一个和前一个按钮不是,但当我点击导航它正在工作.
我不知道我下载这个插件的版本是否兼容
https://github.com/VinceG/twitter-bootstrap-wizard
但它在文档中说它与3.0.3兼容
任何适用于bootstrap 3.0.3表单向导的建议?
谢谢.您的意见非常感谢:)

这是我的HTML代码
<div class="row">
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
<li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
<li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
<li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
<li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
<li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" …Run Code Online (Sandbox Code Playgroud) html javascript jquery twitter-bootstrap twitter-bootstrap-wizard
我刚刚将jQuery Datatable版本升级到1.10.然后我试图用"Button"扩展删除它的退役插件,如"Colvis"和"Tabletools".这里一切都很好.
但对我来说问题是,我无法将"Colvis"按钮与"Tabletool"按钮分开.
"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B",
"buttons": [
'copyHtml5',
'excelHtml5',
'csvHtml5',
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
columns: '0,1,2,3,4,5,6'
}
],
language: {
buttons: {
colvis: 'Change columns'
}
}
Run Code Online (Sandbox Code Playgroud)
在"sDom"中,字母"B"表示按钮.所以我将所有四个按钮(复制,Excel,CSV和Colvis)放在一行中.但我需要将"Colvis"按钮与(Copy,Excel和CSV)分开.
那么有没有办法在搜索框附近添加一个按钮,在分页附近添加另一个按钮?
要么
"sDom"或"按钮"中是否有可用的配置?
谢谢!
我试图在我的项目中实现angular-datatables,但它返回"TypeError:无法读取属性'aDataSort'的undefined
我在用
Angular js版本1.4.9.
Jquery版本2.1.1
DataTable版本1.10.10
参考网站
我的Html代码
<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div>
Run Code Online (Sandbox Code Playgroud)
我的Angular js控制器代码
angular.module( 'admin.package', [
'ui.router',
'ui.bootstrap',
'datatables',
'datatables.bootstrap',
'ngResource',
'plusOne'
]).controller('WithAjaxCtrl', WithAjaxCtrl);
function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) {
if(results.status==200){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages)
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('id'),
DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
DTColumnBuilder.newColumn('amount').withTitle('Amount'),
DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
DTColumnBuilder.newColumn('currency').withTitle('validity')
];
console.log(vm.dtColumns);
console.log( vm.dtOptions);
}else{
alert('You are not a authorized user');
}
}, function(reason) {
console.log(reason);
});
}
Run Code Online (Sandbox Code Playgroud)
提前致谢
在看了Google Devs 的最新视频后,我决定制作一张英国的区域地图.在这个网站上提到的一些可能性,我已经不得不解雇*
所以我最终使用这个网站(数据下载的示例页面):http://mapit.mysociety.org/area/11804.html
注意GeoJSON下载作为第三个链接下来?它的文件大小约为1Mb.当我第一次尝试将它与我的地图一起使用时:
function initMap(){
var ukc = new google.maps.LatLng(54.8, -4.6);
var mapOptions = {
zoom: 5,
center: ukc
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.data.loadGeoJson('http://local.mapsite.com:8080/app/jsondata/eastern.json');
}
$(document).ready(function(){
initMap();
});
Run Code Online (Sandbox Code Playgroud)
我收到了上述错误:Uncaught InvalidValueError:不是Feature或FeatureCollection
谷歌搜索错误回来没有任何用处.
我想也许这是野兽的庞大规模所以我使用mapshaper.org将它缩小到一个更易于管理的10K.仍然没有运气!
也许我的GeoJSON格式错误了?但是怎么可能会考虑在mapit.org上工作,但是我找到了这个用于绘制GeoJSON数据的精彩网站:http://geojsonlint.com/ - linting有效!显然,GeoJSON工作得非常好,它在英国的所有荣耀中绘制了我的东英吉利亚多边形(注意geojsonlint使用OpenStreetMap).但仍然没有运气
希望我可以结合区域并压缩,同时我绝望地认为topojson会起作用.我试过 - 我仍然有同样的错误.这是我在Google云端硬盘上分享的topojson文件的链接:someregions.json 没有运气.
当前的GeoJSON文件启动{"bbox":[ - 0.745702,51.448473,1.767999,52.98991],"type":"GeometryCollection","geometry":...
我补充说:
{"type": "Feature", "bbox":[-0.745702,51.448473,1.767999,52.98991],"type":"GeometryCollection","geometries": …Run Code Online (Sandbox Code Playgroud) 我很难让这个工作起来.我有一个链接打开一个包含链接的jQuery UI对话框.这些链接打开一个包含输入字段的Bootstrap popover.由于某种原因,输入字段不可编辑.
请参阅:http://www.bootply.com/Z46ZXA133U
加价:
<div id="dialog">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
<input type="text" value="try changing me">
</form>
Run Code Online (Sandbox Code Playgroud)
脚本:
$( "#dialog" ).dialog({
height: 300,
width: 350,
modal: true,
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
Run Code Online (Sandbox Code Playgroud) 我table.row.add()使用此代码使用方法在DataTables 1.10.2上动态添加新行:
table.row.add([
'',
name,
target_l,
details,
panel.html()
]).draw();
Run Code Online (Sandbox Code Playgroud)
我制作了这个加价:
<tr role="row" class="odd">
<th>1 .</th>
<td class="sorting_1">ID Fee</td>
<td>All students</td>
<td></td>
<td>
<button class="btn btn-null btn-xs" onclick="_remove(59, 'ID Fee')">
<span class="fui-cross"></span>
</button>
<button class="btn btn-null btn-xs" onclick="_edit(59, 'ID Fee', '', '')">
<span class="icon-pencil"></span>
</button>
</td>
</tr>
Run Code Online (Sandbox Code Playgroud)
我想要做的是将data-id(和其他数据)属性添加到新添加的tr标签(在插入行中或之后),并使其像这样:
<tr data-id="59" role="row" class="odd">
Run Code Online (Sandbox Code Playgroud)
我已经设法使用代码获取新添加的行的索引,并返回最后一行索引:
var i = table.row.add([
'',
name,
target_l,
details,
panel.html()
]).index();
Run Code Online (Sandbox Code Playgroud)
并尝试执行以下操作以使用该索引添加data-id属性:
var id = $("#department_id").val();
table.row(i).attr("data-id", …Run Code Online (Sandbox Code Playgroud) 我正在使用jQuery DataTables为我的一个表设置样式并提供功能:
我的目标
根据资金类型是否活跃进行排序..正如您所看到的,这就是它目前正在做的事情。现在,我想按字母Funding顺序对列进行排序..所以我想要的结果应该是:
Funding One
Funding Two
Funding Three
Funding Four
Alpha
Beta
Charlie
Test
test2
Run Code Online (Sandbox Code Playgroud)
这是到目前为止我的数据表脚本:
var codeFundingTable = $("#Code-Funding-Table").DataTable({
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [2] },
{ "bSearchable": false, "aTargets": [2] }
],
"columns": [
{ "orderData": [1] },
{ "orderData": [0] }
]
});
Run Code Online (Sandbox Code Playgroud)
所以我首先按第 1 列(Active基于 0)排序,然后按第 0 列(Funding)排序,但它不是按字母顺序排序。
我怎样才能做到这一点?
jquery ×6
javascript ×4
datatables ×3
angularjs ×2
html ×2
geojson ×1
google-maps ×1
jquery-ui ×1
maps ×1
popover ×1
tablednd ×1