Я хотел бы создать сетку Angular JS, которая позволяет выпадающим раскрытиям определенных ячеек (данные поступают из MS SQL DB) и определенных ячеек, чтобы пользователь мог вводить данные (щелкая, чтобы выделить). Затем этот пользовательский ввод необходимо отправить обратно в БД MS SQL. Пока у меня есть сетка с разбивкой на страницы и т. Д. c, но редактирование реальных ячеек - вот где я застреваю, мне нужно, чтобы поле 'SFO' было выпадающим, а поле 'MFO', чтобы иметь возможность взять пользователя input.
Любая помощь будет признательна, и если я что-то пропустил по этому вопросу, просто дайте мне знать. Я совершенно новичок в AngularJS, поэтому извиняюсь, если это простая задача!
Пока мой код выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client Tags</title>
<link rel = "stylesheet" href="../CSS/InputToolCSS.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body ng-app="uigridApp">
<div class="formStructureNxx">
<form action="/action_page.php">
<div class="col-sm-3">
<select class="select" id="BankerName" name="title">
<option value="">Banker Name...</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
<option value="o3">Option3</option>
</select>
</div>
<br>
<br>
<fieldset class="form-item">
<label class="control control-checkbox">
<input type="checkbox" aria-labelledby="checkoption_label1" class="control-input">
<span class="control-indicator"></span>
<span class="control-description" id="checkoption_label1">Last Updated Details</span>
</label>
</fieldset>
<div class="banner__body__content--left undefined">
<p class="bannerDetails"><u>Client Tags</u></p>
</div>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>
</div>
<button type="button" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [25, 50, 75, 100],
paginationPageSize: 15,
columnDefs: [
{ field: 'Rel Name' },
{ field: 'Country Affinity', enableFiltering: false },
{ field: 'Client Name', enableFiltering: false },
{ field: 'Client Type', enableFiltering: false },
{ field: 'Residence', enableFiltering: false },
{ field: 'SFO', enableFiltering: false },
{ field: 'MFO', enableFiltering: false },
//
// { field: 'PE', enableFiltering: false },
// { field: 'Char', enableFiltering: false },
// { field: 'Fid', enableFiltering: false },
// { field: 'SPV', enableFiltering: false },
// { field: 'Pen', enableFiltering: false },
// { field: 'NRI', enableFiltering: false },
// { field: 'GRI', enableFiltering: false },
// { field: 'UK/RND', enableFiltering: false },
// { field: 'US', enableFiltering: false },
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ 'Rel Name': "erferf Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "asdasd Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "erfefref Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "56h5 Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "Madhav Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10},
{ 'Rel Name': "erg Sai", 'Country Affinity': 10, 'Client Name': 10, 'Client Type': 10, Residence: 10}
];
$scope.gridOptions.data = $scope.users;
});