小编dav*_*rad的帖子

TableDnD onDrop事件未触发

我确信这很简单,通常都是.

$('#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)

javascript jquery tablednd

12
推荐指数
2
解决办法
7394
查看次数

在Angular JS中,如何禁用所选列的列排序功能

在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)

这段代码隐藏了我的搜索栏,但无法隐藏我的第一列和第四列的排序功能?

angularjs angular-datatables

12
推荐指数
1
解决办法
2万
查看次数

在谷歌图表中,图例指示符颜色不会随条形颜色而变化

我正在使用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)

我得到这样的图表

结果图表

google-visualization

10
推荐指数
1
解决办法
1万
查看次数

Bootstrap 3表单向导

嗨我有问题与我用于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

10
推荐指数
1
解决办法
2万
查看次数

用于按钮的jQuery Datatable DOM定位

我刚刚将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"或"按钮"中是否有可用的配置?

谢谢!

jquery datatables twitter-bootstrap datatables-1.10

10
推荐指数
1
解决办法
2万
查看次数

无法读取角度数据表中未定义的属性"aDataSort"

我试图在我的项目中实现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)

提前致谢

jquery datatables angularjs angular-datatables

10
推荐指数
1
解决办法
8913
查看次数

Uncaught InvalidValueError:不是Feature或FeatureCollection

在看了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

修复尝试1 - 谷歌它

谷歌搜索错误回来没有任何用处.

修复尝试2 - 收缩它

我想也许这是野兽的庞大规模所以我使用mapshaper.org将它缩小到一个更易于管理的10K.仍然没有运气!

修复尝试3 - Lint it

也许我的GeoJSON格式错误了?但是怎么可能会考虑在mapit.org上工作,但是我找到了这个用于绘制GeoJSON数据的精彩网站:http://geojsonlint.com/ - linting有效!显然,GeoJSON工作得非常好,它在英国的所有荣耀中绘制了我的东英吉利亚多边形(注意geojsonlint使用OpenStreetMap).但仍然没有运气

修复尝试4 - TopoJson

希望我可以结合区域并压缩,同时我绝望地认为topojson会起作用.我试过 - 我仍然有同样的错误.这是我在Google云端硬盘上分享的topojson文件的链接:someregions.json 没有运气.

修复尝试5 - 添加功能代码以启动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)

maps google-maps geojson google-maps-api-3

9
推荐指数
2
解决办法
9011
查看次数

无法将输入元素集中在jQuery UI对话框内的Bootstrap Popover中

我很难让这个工作起来.我有一个链接打开一个包含链接的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)

jquery-ui jquery-ui-dialog popover twitter-bootstrap

8
推荐指数
1
解决办法
2963
查看次数

将数据属性放在DataTables 1.10上的行add中

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)

html javascript jquery jquery-datatables datatables-1.10

8
推荐指数
1
解决办法
8959
查看次数

jQuery DataTables 按 2 列排序

我正在使用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)排序,但它不是按字母顺序排序。

我怎样才能做到这一点?

javascript jquery datatables

8
推荐指数
1
解决办法
1万
查看次数