Добавьте флажок в каждой строке для jquery с данными, используя angular.js
Я хочу отображать некоторые данные в формате datatable с помощью angular 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 в каждую строку, чтобы я мог редактировать и обновлять его запись. Есть ли кто-нибудь, кто может мне помочь с этим в angular.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это тот? Выбранный плагин. withSelect
да, этот .. но его не выбирают. а также что, если я хочу выделить все сразу ??
Да посмотрите на это ..rowSelect
Как упоминал 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()
})
Я поставил галочку по мере необходимости. Теперь, как добавить заголовок и установить флажок, чтобы получить данные текущей строки? любая идея, сэр. Спасибо за полезный ответ
Нет никаких предупреждений для alert(data); ?? как проверить, что значения поступают правильно
также появляется ошибка как Uncaught TypeError: Cannot read property 'DataTable' of undefined
@BN, вы использовали обратный вызов для установки dtInstance? Используйте последний пример в связанном потоке SO -> stackoverflow.com/a/50624700/1407478
пробовал вот так $scope.dtInstance = {};, но все равно не работает. та же ошибка. также добавлен в table, как этот <table id = "entry-grid" datatable = "" dtinstance = "dtInstance" dt-options = "dtOptions" dt-columns = "dtColumns" class = "table table-hover"></table>
@BN, как сказано, используйте обратный вызов, как показано в ответе по ссылке.
да, сейчас работает с другой небольшой проблемой, Uncaught TypeError: Cannot read property 'row' of undefined
У вас dtinstance вместо dt-instance (или dtInstance) ...?
Вы хотите добавить новые строки и опубликовать или отредактировать существующие строки с помощью флажка?