增刪改查列表angular.js頁面實現

阿新 • • 發佈：2018-12-27

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel=" 
stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js 
"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    
    <link rel=" 
stylesheet" href="../plugins/angularjs/pagination.css"/>
    <script type="text/javascript">
        var app = angular.module('eshop',['pagination']);
        app.controller('brandController',function($scope,$http){
            //獲取查詢資料
            $scope.findAll= function(){
                $http.get('../brand/getAllBrand.do').success(
                    function(res){
                        $scope.list = res;
                    }        
                )
            };
            
            //分頁控制元件控制
            $scope.paginationConf={
                    currentPage:1,  //當前頁
                    totalItems:10,  //總記錄數
                    itemsPerPage:10,  //每頁記錄數
                    perPageOptions:[10,20,30,40,50], //分頁選項
                    onChange:function(){ //當頁碼變更後自動觸發的方法
                        $scope.reloadList();//會變化
                    }
            };
            //帶條件重新整理列表
            $scope.reloadList=function(){
                $scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
            };
            //重新整理列表
            $scope.reloadListNoCondition=function(){
                $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
            };
            
            $scope.findPage=function(page,size){
                $http.get('../brand/getBrandByPage.do?page='+page+'&size='+size).success(
                        function(res){
                            $scope.list = res.rows;//顯示當前頁資料
                            $scope.paginationConf.totalItems=res.total;//更新總記錄數
                        }        
                    )
            }
            
            //新增品牌
            $scope.save=function(){
                var methodName = 'addBrand';
                if($scope.entity.id){
                    methodName = 'updateBrand';
                }
                $http.post('../brand/'+methodName+'.do',$scope.entity).success(
                    function(res){
                        if(res.success){
                            $scope.reloadListNoCondition();//重新整理列表    
                        }else{
                            alert(res.message);
                        }
                    }        
                )
            }
            
            //查詢品牌
            $scope.findOne=function(id){
                $http.get('../brand/queryBrand.do?id='+id).success(
                    function(res){
                        $scope.entity = res;
                    }        
                )
            }
            
            //獲取刪除品牌的id
            $scope.selectIds = [];
            $scope.selectid = function($event,id){
                if($event.target.checked){
                    $scope.selectIds.push(id);//向集合元素中新增資料
                }else{
                    var index = $scope.selectIds.indexOf(id);
                    $scope.selectIds.splice(index,1);
                }
            }
            //刪除
            $scope.del = function(){
                $http.get('../brand/deleteBrand.do?ids='+$scope.selectIds).success(
                    function(res){
                        if(res.success){
                            $scope.reloadList();//重新整理列表    
                        }else{
                            alert(res.message);
                        }
                    }
                )
                $scope.selectIds=[];
            }
            //查詢
            $scope.searchEntity={};
            $scope.search=function(page,size){
                $scope.searchEntity.size=size;
                $scope.searchEntity.page=page;
                $http.post('../brand/search.do',$scope.searchEntity).success(
                        function(res){
                            $scope.list = res.rows;//顯示當前頁資料
                            $scope.paginationConf.totalItems=res.total;//更新總記錄數
                        }        
                    )
            }
            
        });
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="eshop" ng-controller="brandController" >
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 資料表格 -->
                        <div class="table-box">

                            <!--工具欄-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新增" data-toggle="modal" data-target="#editModal" ng-click="entity={}"><i class="fa fa-file-o"></i> 新增</button>
                                        <button type="button" class="btn btn-default" title="刪除" ng-click="del()"><i class="fa fa-trash-o"></i> 刪除</button>           
                                        <button type="button" class="btn btn-default" title="重新整理" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 重新整理</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                            品牌名稱：<input ng-model="searchEntity.name"> 品牌首字母:&nbsp;&nbsp;<input ng-model="searchEntity.firstChar">&nbsp;&nbsp;<button type="button" class="btn btn-default" ng-click="reloadList()">查詢</button>
                                                                         
                                </div>
                            </div>
                            <!--工具欄/-->

                              <!--資料列表-->
                              <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                  <thead>
                                      <tr>
                                          <th class="" style="padding-right:0px">
                                              <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                          </th> 
                                          <th class="sorting_asc">品牌ID</th>
                                          <th class="sorting">品牌名稱</th>                                          
                                          <th class="sorting">品牌首字母</th>                                                         
                                          <th class="text-center">操作</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr ng-repeat="entity in list">
                                          <td><input  type="checkbox" ng-click="selectid($event,entity.id)"></td>                                          
                                          <td>{{entity.id}}</td>
                                          <td>{{entity.name}}</td>                                         
                                          <td>{{entity.firstChar}}</td>                                         
                                          <td class="text-center">                                           
                                               <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button>                                           
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                              <!--資料列表/-->                        
                             
                        </div>
                        <!-- 資料表格 /-->
                        <tm-pagination conf="paginationConf"></tm-pagination>
                        
                        
                        
                     </div>
                    <!-- /.box-body -->
         
<!-- 編輯視窗 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">品牌編輯</h3>
        </div>
        <div class="modal-body">        
            <table class="table table-bordered table-striped"  width="800px">
                  <tr>
                      <td>品牌名稱</td>
                      <td><input  class="form-control" placeholder="品牌名稱" ng-model="entity.name">  </td>
                  </tr>                  
                  <tr>
                      <td>首字母</td>
                      <td><input  class="form-control" placeholder="首字母" ng-model="entity.firstChar">  </td>
                  </tr>                  
             </table>                
        </div>
        <div class="modal-footer">                        
            <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">儲存</button>
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">關閉</button>
        </div>
      </div>
    </div>
</div>
   
</body>
</html>

增刪改查列表angular.js頁面實現

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

python增刪改查,列表

插入其他 pytho == list 正序 lap blog 技術 list增刪改查 1 # [1,2,‘c‘,‘dfas‘,True] 2 #索引和切片。 3 # li = [1,2,3,‘af‘,‘re‘,4,‘45‘] 4 # print(l[0])

ext3.0 增刪改查集中到一個頁面

ext3.0 ，很新穎，很可能代表著未來B/S架構頁面框架的方向。在用ext的時候，發現幾個小問題: 1.包的路徑不明確。嵌入的頁面沒有放到web-root目下的請求前要加../但是通過window.showModuleDialoge彈出的頁面則不需要加 2.在建樹的時候總會出現樹節點

書城後臺管理的增刪改查功能以及分頁實現

點選圖書管理按鈕進入圖書管理列表 <%@ page language="java" conte

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（四）：自定義T4模板快速生成頁面

前言：上篇介紹了下ko增刪改查的封裝，確實節省了大量的js程式碼。博主是一個喜歡偷懶的人，總覺得這些基礎的增刪改查效果能不能通過一個什麼工具直接生成頁面效果，啥程式碼都不用寫了，那該多爽。於是研究了下T4的語法，雖然沒有完全掌握，但是算是有了一個大致的瞭解，給需要自定義模板的園友們提供一個參考。於是乎有了今天

通過flask實現web頁面簡單的增刪改查

bug html red end pla pan fileutil log class 通過flask實現web頁面簡單的增刪改查 # 1.後臺程序falsk_web01.py #coding:utf-8 from flask import Flask

Mock.js簡易教程，脫離後端獨立開發，實現增刪改查功能

定義數據 false 則表達式 type break 整數增刪改查大於在我們的生產實際中，後端的接口往往是較晚才會出來，並且還要寫接口文檔，於是我們的前端的許多開發都要等到接口給我們才能進行，這樣對於我們前端來說顯得十分的被動，於是有沒有可以制造假數據來模擬後

js實現對cookie的增刪改查

簡單來說Cookie是以鍵值對的形式儲存的（Key=Value），各Cookie之間一般是以“；”隔開。簡單的操作：儲存cookie(key為test；value為testValue): document.cookie = "test=testValue";

Angular.js 用Angular.js加Jquery做增刪改查

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <script src="js/jq

增刪改查 angular js

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <sc

Angular js 增刪改查

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &n

Angular JS 增刪改查（彈框修改）

input{ border-radius: 5px; } ul{ list-style: none; } .tip{ color: red; } .aquamarine{ background-color: aquamarine; } .antiqu

easyui頁面實現增刪改查和後臺結合的小案例

效果：增刪改查，滑鼠移動到縮圖上進行放大顯示，修改資料時的資料回顯，通過後臺返回的json資料正確顯示頁面，圖片檔案上傳，增刪改的快捷鍵操作，顏色選擇器，右擊選單等等下面我們先看看效果是不是自己想要的吧，程式碼放最後了~~ 資料展示頁面：顯示頁面時後臺返回的json格式

listview和sqlist實現學生列表增刪改查

實現介面和程式碼總專案結構 student實體類 public class student implements Serializable{ private int id; private String name

用Angular.js加Jquery做增刪改查

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <scrip

php 如何在HTML頁面中實現對資料庫表資料的增刪改查

　　上一篇詳細說明了如何將資料庫中的資料列印到html頁面上，本篇將介紹如何在HTML頁面的表格裡進行對資料庫內容的增刪改查還是借用上一篇的頁面，在此基礎上增加了操作按鈕：<!doctype html><html><head><meta charset="utf-8"

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（一）

前言：出於某種原因，需要學習下Knockout.js，這個元件很早前聽說過，但一直沒嘗試使用，這兩天學習了下，覺得它真心不錯，雙向繫結的機制簡直太爽了。今天打算結合bootstrapTable和Knockout去實現一個簡單的增刪改查，來體驗一把神奇的MVVM。關於WebApi的剩餘部分，博主一定抽時間補上。

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（二）

前言：上篇 JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（一）介紹了下knockout.js的一些基礎用法，由於篇幅的關係，所以只能分成兩篇，望見諒！昨天就覺得應該快點完成下篇，要不然有點標題黨的感覺，思及此，博主心有不安，於是加班趕出了下篇。如果你也打算用ko去做

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（三）：兩個Viewmodel搞定增刪改查

前言：之前博主分享過knockoutJS和BootstrapTable的一些基礎用法，都是寫基礎應用，根本談不上封裝，僅僅是避免了html控制元件的取值和賦值，遠遠沒有將MVVM的精妙展現出來。最近專案打算正式將ko用起來，於是乎對ko和bootstraptable做了一些封裝，在此分享出來供園友們參考。封裝

hibernate簡單程式，實現從頁面對資料庫的增刪改查（主從表關聯）

前段時期一直使用三層來寫從頁面對資料庫的增刪改查，今天用hibernate框架來實現從頁面對資料庫的增刪改查，首先介紹下今天我們要實現的功能， 1、使用者能夠註冊，2、註冊成功後直接跳到登入頁面，3、登入成功後直接跳到對公司、人員的增刪改查， 4、要有對人員介

增刪改查列表angular.js頁面實現

相關推薦