Добавьте флажок в каждой строке для datatable jquery, используя angular.js

Question

Я хочу отобразить некоторые данные в формате datatable с использованием угловых js.

Итак, я сделал что-то вроде ниже.

Угловая

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>

var app = angular.module('myapp', ['datatables']);
app.controller('homectrl', ['$scope', '$http', 'dtoptionsbuilder', 'dtcolumnbuilder',
    function ($scope, $http, dtoptionsbuilder, dtcolumnbuilder) {
        $scope.dtcolumns = [
            //dtcolumnbuilder.newcolumn("action", "action"),
            dtcolumnbuilder.newcolumn("objectid", "id"),
            dtcolumnbuilder.newcolumn("service_code", "service code"),
            dtcolumnbuilder.newcolumn("cond1", "condition 1"),
            dtcolumnbuilder.newcolumn("cond2", "condition 2"),
            dtcolumnbuilder.newcolumn("cond3", "condition 3"),
            dtcolumnbuilder.newcolumn("service_type", "service type"),
            dtcolumnbuilder.newcolumn("remark", "remark"),
            dtcolumnbuilder.newcolumn("description", "description")
        ]
        $scope.dtoptions = dtoptionsbuilder.newoptions().withoption('ajax', {
            url: "/home/getdata",
            type: "post"
        })
        .withpaginationtype('full_numbers')
        .withdisplaylength(10);
    }])

<div ng-app="MyApp" class="container" ng-controller="homeCtrl">

    <div ng-controller="homeCtrl">
        <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover">           
        </table>
<br />
    </div>

А Контроллер

public ActionResult getdata()
    {
        DataTable dt = new DataTable();
        using (OracleConnection conn = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnAPP_NEIQC"].ToString()))
        {   
            GetData objGetData = new GetData();
            dt =  objGetData.GetDataForGrid();

            var circleList = (from DataRow dr in dt.Rows
                           select new 
                           {         
                               //Action = "",
                               OBJECTID = Convert.ToString(dr["OBJECTID"]),
                               SERVICE_CODE = Convert.ToString(dr["SERVICE_CODE"]),
                               COND1 = Convert.ToString(dr["COND1"]),
                               COND2 = Convert.ToString(dr["COND2"]),
                               COND3 = Convert.ToString(dr["COND3"]),
                               SERVICE_TYPE = Convert.ToString(dr["SERVICE_TYPE"]),
                               REMARK = Convert.ToString(dr["REMARK"]),
                               DESCRIPTION = Convert.ToString(dr["DESCRIPTION"]),
                           }).ToList();

            return Json(circleList, JsonRequestBehavior.AllowGet);
        }
    }

Теперь я хочу добавить CHECKBOX в каждую строку, чтобы я мог редактировать и обновлять его записи. Есть ли кто-нибудь, кто может помочь мне с этим в угловых.

Answer 1

Как уже упоминал yujinpan, вы можете использовать расширение select. Или просто установите флажок самостоятельно:

$scope.dtcolumns = [
  dtcolumnbuilder.newcolumn(null, '').renderWith(function(data, type, full)
     return '<input type="checkbox" class="check" data-object-id="'+full.objectid+'">'
  }),
  dtcolumnbuilder.newcolumn("objectid", "id"),
  ...
]

Теперь вы можете связать делегированные обработчики событий с флажками через класс .check.

---

Используйте dtInstance как объяснено здесь или в документах здесь (см. Внизу страницы). Теперь вы можете сделать что-то вроде

$('#entry-grid').on('click', '.check', function() {
   var data = $scope.dtInstance.DataTable.row($(this).closest('tr')).data()
})

Answer 2

Это？ плагин выбора. withSelect