[英]Add a checkbox in each row for datatable jquery using angular.js
我想是的,我想显示在一些数据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
,以便我可以编辑和更新其记录。 有谁可以帮助我做到这一点。
是这个吗?选择插件。 withSelect
如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()
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.