[英]Add a checkbox in each row for datatable jquery using angular.js
What I want is, I want to display some data in a datatable
format by using angular js. 我想是的,我想显示在一些数据
datatable
通过使用角度JS格式。
So I did something like below. 所以我做了下面的事情。
Angular 角
<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>
And Controller 和控制器
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);
}
}
Now what I want is, I want to add a CHECKBOX
in each row so that I can edit and update its record. 现在我想要的是,我想在每行中添加一个
CHECKBOX
,以便我可以编辑和更新其记录。 Is there anyone who can help me with this in angular. 有谁可以帮助我做到这一点。
Is it this one?the select plugin. 是这个吗?选择插件。 withSelect
withSelect
As mentioned by yujinpan you can use the select extension. 如yujinpan所述,您可以使用select扩展名。 Or simply just render out a checkbox yourself:
或者只是自己渲染一个复选框:
$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"),
...
]
Now you can associate delegated event handlers with the checkboxes through the .check
class. 现在,您可以通过
.check
类将委派的事件处理程序与复选框相关联。
Use a dtInstance
as explained here or in the docs here (look at the bottom of page). 使用
dtInstance
作为解释这里或文档这里 (看页面的底部)。 Now you could do something like 现在你可以做类似的事情
$('#entry-grid').on('click', '.check', function() {
var data = $scope.dtInstance.DataTable.row($(this).closest('tr')).data()
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.