angular1.x 實現表格的增刪改查

阿新 • • 發佈：2019-01-15

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實現表格的增刪改查</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
<scriptsrc="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.add{
position:relative;
top:-40px;
left:1000px;
}
</style>
</head>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
<h2>管理資訊：</h2><br>
<p>搜尋：<inputtype="text"placeholder="請輸入關鍵字"ng-model="test"></p>
<buttonclass="btn btn-primary add"ng-click="add()">新增</button>
<tableclass="table table-bordered"style="text-align: center">
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in texts | filter:test">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.city}}</td>
<td>
<buttonclass="btn btn-warning"" ng-click="update($index)">修改</button>
<button class="btnbtn-danger" ng-click="del($index)">刪除</button>
</td>
</tr>
</tbody>
</table>
<!-- 新增資訊 -->
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphiconglyphicon-remove"></span>
</button>
<h3 class="modal-title">新增資訊</h3>
</div>
<div class="modal-body">
<div>姓名：</div>
<input ng-model="newName" type="text">
<div>年齡：</div>
<input ng-model="newAge" type="text">
<div>城市：</div>
<input ng-model="newCity" type="text">
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">關閉</button>
<button class="btnbtn-success" ng-click="save()">儲存</button>
</div>
</div>
</div>
</div>
<!-- 修改資訊 -->
<div class="modal" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphiconglyphicon-remove"></span>
</button>
<h3 class="modal-title">修改資訊</h3>
</div>
<div class="modal-body">
<div>姓名：</div>
<input ng-model="prod.name" value="{{prod.name}}" type="text">
<div>年齡：</div>
<input ng-model="prod.age" value="{{prod.age}}" type="text">
<div>城市：</div>
<input ng-model="prod.city" value="{{prod.city}}" type="text">
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">關閉</button>
<button class="btnbtn-success" ng-click="ensure()">確定</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myCtrl',function($scope){
//定義表格內容
$scope.texts = [
{name:"張三",age:"23",city:"海南"},
{name:"李四",age:"25",city:"香港"},
{name:"王五",age:"25",city:"濟南"},
{name:"劉六",age:"22",city:"濟南"},
{name:"李七",age:"35",city:"煙臺"},
{name:"張八",age:"32",city:"聊城"},
{name:"呂九",age:"30",city:"盤錦"}
];
//定義一個空物件，用於儲存和修改資料時臨時儲存
$scope.prod = {};
//定義一個單擊刪除按鈕時觸發的事件，用於刪除選中行
$scope.del = function ($index) {
if($index>=0){
if(confirm("是否刪除"+$scope.texts[$index].name) ){
$scope.texts.splice($index,1);
}
}
};
//定義一個全域性變數idx,用於儲存選中行的索引，方便執行儲存操作。idx取值為0、1、、、、都有用，所以暫取值為-1;
var idx = -1;
//定義一個點選新增按鈕時觸發的事件，用於新增資料
$scope.add = function(){
//顯示bootstrap中的模組視窗
$('#modal-1').modal('show');
};
//定義一個點選儲存按鈕時觸發的事件
$scope.save = function(){
//將新增的值賦給陣列
$scope.texts.name = $scope.newName;
$scope.texts.age = $scope.newAge;
$scope.texts.city = $scope.newCity;
$scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});
//關閉模組視窗
$('#modal-1').modal('hide');
};
//定義一個點選修改按鈕時出發的事件，用於修改資料
$scope.update = function($index){
//顯示bootstrap中的模組視窗
$('#modal-2').modal('show');
//將選中行的資料繫結到臨時物件prod中，在下面的模態視窗中展示出來
$scope.prod.name = $scope.texts[$index].name;
$scope.prod.age = $scope.texts[$index].age;
$scope.prod.city = $scope.texts[$index].city;
//選中行的索引賦值給全域性變數idx
idx = $index;
};
//定義一個點選確定按鈕時觸發的事件,
$scope.ensure = function () {
//將修改後的值賦給陣列
$scope.texts[idx].name = $scope.prod.name;
$scope.texts[idx].age = $scope.prod.age;
$scope.texts[idx].city = $scope.prod.city;
//關閉模組視窗
$('#modal-2').modal('hide');
};
});
</script>
</body>
</html>

bootstrap-table 實現表格增刪改查

bootstrap、bootstrap-table官網：http://bootstrap-table.wenzhixin.net.cn/documentation/ 相關cs js 引用dns地址： http://www.bootcdn.cn/bootstrap/ 下載到

angular1.x 實現表格的增刪改查

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實現表格的增刪改查</title> <meta http

JqueryEasyUI實現CRUD增刪改查操作

per queryall call .get field string cal upd wid 1.代碼介紹：前端界面由jsp,JqueryEasyUI制作，後臺代碼由Servlet實現邏輯操作註：JqueryEasyUI的庫文件和其他自己jar包自己導入。Jquery

Java操作數據庫實現"增刪改查"

mysq 新的 rom 可用 erp catch next() value eight 本文主要講解JDBC操作數據庫主要實現對MySql數據庫的"增刪改查" 綜合概述: JDBC的常用類和接口一 DriverManager類 DriverManage類用

javascript 表格增刪改查排序不會（第一次寫部落格，求交流哈）

學習JS快1個月了，博主本人上的是培訓的，快考試了，補習下學過的發下今晚寫的吧。。。有大神看看我的這種程度，排序事件怎麼弄~~ <!DOCTYPE html><html lang="zh"><head> <

Jquery+Bootsrap純前臺表格增刪改查操作

介面: bootstrap JavaScript框架 :Jquery 練習: 節點操作。效果圖: 線上檢視原始碼: <!DOCTYPE

java實現elasticsearch增刪改查方法

這篇文章旨在是幫助新接觸elasticsearch的同學快速上手es，儘早的為團隊貢獻自己的力量。（一）往es中增加資料 import org.elasticsearch.client.Client; import org.elasticsearch.client.transport.

nodejs+mysql+Express+vue+layui+html實現的增刪改查

學習nodejs已經有一段時間了由於一些事情一直沒有寫 1.首先使用idea新建一個專案 2、建立的專案目錄如下圖所示 3.開啟app.js，找到模版引擎設定並進行修改修改為如下程

Web介面實現資料庫增刪改查過程

實現方法：JSP+Servlet+JavaBean 基本實現思想：jsp檔案為顯示介面，包括增刪改查四個介面，然後使用form或者href超連結的方法將網頁獲得的值傳到Servlet中的方法裡；而servlet方法中呼叫dao層裡面的包括增刪改查等方法的物件，以此實現對資料庫裡面的資料的增刪改查，最後返回頁

EF三層構架+介面實現（增刪改查）

DbContext DbContext是EntityFramework很重要的部分，連線域模型與資料庫的橋樑，是與資料庫通訊的主要類。 DbContext主要負責以下活動： EntitySet:：DbContext包含了所有對映到表的entities

Mybatis 學習筆記——原生DAO實現資料增刪改查

一、開發環境 JDK java version “1.8.0_171” Java™ SE Runtime Environment (build 1.8.0_171-b11) Java HotSpot™ 64-Bit Server VM (build 25.1

Mybatis 學習筆記（三）——使用Mapper代理的方式實現資料增刪改查

一、介紹 Mapper代理的方式只需要程式設計師編寫 Mapper.xml 檔案及 Mapper介面。本文是基於上一篇文章：Mybatis 學習筆記——原生DAO實現資料增刪改查，所以接下來的內容是以其為基礎的，如果有什麼不懂的請留言或檢視上一篇。所

JavaWeb 實現基礎增刪改查 CRUD

1.資料庫表如下 CREATE TABLE `employee` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(40) NOT NULL, `note` varchar(200) DEFAULT NULL,

MyBatis實現基礎增刪改查的功能

MyBatis編碼的三種思路 1. 實體類+對映檔案+基礎配置檔案+測試類實體類 public class Users { private int id; private String name; private int age;//屬性的型別及屬性名

Node+Express+MySql實現簡單增刪改查和登入

var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser = require('body-parser'); //連結資料庫 var connection = mys

Kotlin整合Spring Boot實現資料庫增刪改查(mybatis版)

前幾天由於工作需要，便開始學習了kotlin,java基礎紮實學起來也還算比較快，對於kotlin這個程式語言自然是比java有趣一些，因此就有了使用kotlin搭建基於spring boot的開發環境。這次先分享mybatis版本的 1 maven的pom檔案 <

Kotlin整合Spring Boot實現資料庫增刪改查(spring data jpa版)

接上次的kotlin整合spring boot的mybatis版本，這次分享的內容也很精彩，現在spring data jpa也慢慢流行起來了，因此學習kotlin的時候也順帶寫了spring data jpa版本的，下面就直接上程式碼分享給大家了 1 pom加入如下配置

mongoose建立資料結構，實現基本增刪改查功能

首先建議建立如下目錄結構的一個express專案目錄結構 --server --bin//這個檔案目錄是放置express專案啟動項檔案 --models//放置對應資料的結構 --public//前端頁面以及靜態資源 --routes//後端業務邏輯 --util//公

java 移動節點，排序號進行重新排序，以閉包形式實現ztree增刪改查操作，其中排序運用到此方法

package com.avic.custom.controller.ct; import java.util.HashMap; import java.util.Map; /** * 移動節點重新排序操作 * @author Administrator * */

c# 連線 mysql 以及實現簡易增刪改查

1.首先下載連線mysql需要的dll，任意門：http://pan.baidu.com/share/link?shareid=1024071329&uk=2442594409 2.本人選用的時2.0的； 3.然後在工程新增引用如下：相關類： using M

angular1.x 實現表格的增刪改查

相關推薦