在移动设备的表格单元格中编辑数据的插件或任何内容?

时间:2017-01-06 06:46:44

标签: javascript angularjs html5

看到我在移动设备上有一张桌子,我希望它的数据可以编辑。目前,我正在使用文本框进行编辑,但它看起来不太好(特别是如果值较大,则值会被切断)。

我在考虑类似于点击单元格时会弹出一个模态和一个文本框来编辑该单元格?有什么插件看起来像这样或者可能如果你有更好的解决方案你会介意分享吗?谢谢 enter image description here

3 个答案:

答案 0 :(得分:1)

DataTables JS是最好的选择,这使得细胞可以编辑。这是给定的example

如果您想点按即可启用编辑功能。我建议你使用JQuery Touch Punch。它会将您的点击转换为点击事件。

答案 1 :(得分:1)

我一直在使用ng-tableDataTables。 根据您的轻松,您可以使用其中任何一个

答案 2 :(得分:0)

you can use angular bootstarp modal 

Just open a modal on click of any cell and set the value of that cell in the modalInstance.result.then() function.
below is sample code for opening a modal.

You can find more detail about modal on below link
https://angular-ui.github.io/bootstrap/



var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      appendTo: parentElem,
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

    modalInstance.result.then(function (returned_value) {

    // Set the value of selected cell here

    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });