欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS結合bootstrap實現基本的增刪改查功能

 更新時間:2016年07月22日 08:51:25   投稿:lijiao  
這篇文章主要介紹了JS結合bootstrap實現基本的增刪改查功能,需要的朋友可以參考下

提出問題:如何利用原生的js實現基本的增刪改查功能???

解決問題
假如你已經對JS有一定基礎
假如你對bootstrap有一定基礎

下面是具體的例子,

包含兩個文件(index.jsp  和  index.js)

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <!-- Bootstrap -->
 <link href="resource/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 <link href="resource/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
 <title>JS框架學習</title>

 </head>
 <body onload="loadUserDatas()">
 <div class="container">
 <table class="table" id="table">
 <caption><h2>練習一</h2></caption>
 <caption>
  <button type="button" class="btn btn-info" id="user_add" data-toggle="modal" 
 data-target="#myModal" onclick="optionUserData(this);">新增</button>
  <button type="button" class="btn btn-info" id="user_delete" onclick="optionUserData(this);">刪除</button>
  <button type="button" class="btn btn-info" id="user_edit" data-toggle="modal" 
 data-target="#myModal" onclick="optionUserData(this);">編輯</button>
  <button type="button" class="btn btn-info" id="user_find" onclick="optionUserData(this);">查詢</button>
  <input type="text" id="s_code" placeholder="按工號查詢" style="width: 80px;">
  <input type="text" id="s_userName" placeholder="按姓名查詢" style="width: 80px;">
  <input type="text" id="s_all" placeholder="全文搜索" style="width: 80px;">
 </caption>
 <thead>
  <tr>
  <th>序號</th>
  <th>工號</th>
  <th>姓名</th>
  <th>性別</th>
  <th>密碼</th>
  <th>年齡</th>
  <th>出生日期</th>
  </tr>
 </thead>
 <tbody id="tbody">
 </tbody>
 </table>

 <!-- 模態(tài)框(Modal) -->
 <div class="modal hide" id="myModal" role="dialog" >
 <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
   ×
  </button>
  <h4 class="modal-title" id="myModalLabel">
   新增用戶
  </h4>
  </div>
  <div class="modal-body" id="modal-body">
  <label for="name">工號:</label>
   <input type="text" class="form-control" id="m_code" placeholder="請輸入工號">
   <label for="name">姓名:</label>
   <input type="text" class="form-control" id="m_userName" placeholder="請輸入姓名">
   <label for="name">性別:</label>
   <input type="text" class="form-control" id="m_sex" placeholder="請輸入性別">
   <label for="name">密碼:</label>
   <input type="text" class="form-control" id="m_passWord" placeholder="請輸入密碼">
   <label for="name">年齡:</label>
   <input type="text" class="form-control" id="m_age" placeholder="請輸入年齡">
   <label for="name">出生日期:</label>
   <input type="text" class="form-control" id="m_birthday" placeholder="請輸入出生日期">
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" 
   data-dismiss="modal">保存
  </button>
  <button type="button" class="btn btn-primary">提交更改</button>
  </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
 </div>
 <!-- 這里需要引入相關的js,很重要,請記住 -->
 <script type="text/javascript" src="resource/jquery/jquery.js"></script>
 <script type="text/javascript" src="resource/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="index.js"></script>
 </body>
 </html>
 復制代碼
 復制代碼
 //存放所有用戶
 var users = users || {};
 //操作類型
 var operateType = "";
 //存放搜索對象
 var searchUsers = searchUsers || {};
 //用戶構造方法
 var User = {
  Create:function(code,userName,sex,passWord,age,birthday){
  this.code = code;
  this.userName = userName;
  this.sex = sex;
  this.passWord = passWord;
  this.age = age;
  this.birthday = birthday;
  },
  //添加用戶
  addUserData:function(){
  if(this.code != ""){
   users[this.code] = this;
  }
  },
  //刪除用戶
  deleteUserData:function (){
  for(var i in users){
   if(this.code == users[i].code){
   delete users[i];
   }
  }
  },
  //編輯用戶
  editUserData:function(){
  for(var i in users){
   if(this.code == users[i].code){
   users[i].userName = this.userName;
   users[i].sex = this.sex;
   users[i].passWord = this.passWord;
   users[i].birthday = this.birthday;
   users[i].age = this.age;
   }
  }
  },
  //查找用戶
  findUserData:function(data){

  for(var i in users){
   if(data.code.indexOf(users[i].code) >= 0 || 
    data.userName.indexOf(users[i].userName) >= 0){
   searchUsers[users[i].code] = users[i];
   refreshDatas(searchUsers);
   }
  }
  }
 };

 function New(aClass,aParams){
 function new_(){
  aClass.Create.apply(this,aParams);
 }
 new_.prototype = aClass;
 return new new_();
 }

 //bootstrap模態(tài)框事件
 $('#myModal').on('hide.bs.modal', function () {
 // 執(zhí)行一些動作...
 var inputElements = this.getElementsByTagName("input");
 var userArr = [];
 for(var i=0;i<inputElements.length;i++){
  userArr[i] = inputElements[i].value;
 }
 var user = New(User,userArr);
 //添加操作
 if(operateType == "add"){
  user.addUserData();
  refreshDatas(users);
 //編輯操作
 }else if(operateType == "edit"){
  user.editUserData();
  refreshDatas(users);
 }
 });

 /**
 * 首次加載頁面執(zhí)行方法
 */
 function loadUserDatas(){
 var userArray = initUserDatas();
 addRowData(userArray);
 refreshDatas(users);

 }
 /**
 * 初始化用戶數據
 */
 function initUserDatas(){
 var initUser1 = New(User,["1001","小蘭","女","1234","13","1991-1-1"]);
 var initUser2 = New(User,["1002","小毅","男","1234","13","1991-1-1"]);
 var initUser3 = New(User,["1003","蘭花","女","1234","13","1991-1-1"]);
 var initUser4 = New(User,["1004","蘭兒","女","1234","13","1991-1-1"]);
 users[initUser1.code] = initUser1;
 users[initUser2.code] = initUser2;
 users[initUser3.code] = initUser3;
 users[initUser4.code] = initUser4;
 return users;
 }

 /**
 * 往表格添加一行html數據
 */
 function addRowData(datas){
 var tbodyElement = document.getElementById("tbody");
 var html = "";
 var color = "warning";
 var flag = true;
 for(var i in datas){
  if(flag){
  color = "info";
  }else{
  color = "warning";
  }
  html = html + "<tr class='"+ color +"'><td style='width:30px;'><input type='checkbox'></td><td id='code'>"
   + datas[i].code +"</td><td id='userName'>"
   + datas[i].userName +"</td><td id='sex'>"
   + datas[i].sex +"</td><td id='passWord'>"
   + datas[i].passWord +"</td><td id='age'>"
   + datas[i].age +"</td><td id='birthday'>"
   + datas[i].birthday +"</td>" 
   +"</tr>";

  flag = !flag;//顏色轉換
 }
 tbodyElement.innerHTML = html;
 }
 /**
 * 刷新用戶數據
 */
 function refreshDatas(datas){
 addRowData(datas);
 };

 /**
 * 收集一行數據
 */
 function collectionRowData(param){
 var tdElement = param.getElementsByTagName("td");
 var userArr = [];
 for(var i=1;i<tdElement.length;i++){
  var temp = tdElement[i].textContent;
  userArr[i-1] = temp;
 }
 var user = New(User,userArr);
 return user;
 }
 /**
 * 用戶操作方法
 */
 function optionUserData(param){
 //獲得操作類別
 var optionType = param.getAttribute("id");
 if(optionType == "user_add"){
  operateType = "add";
 }else if(optionType == "user_delete"){
  var checkRowData = isCheckedData();
  var user = collectionRowData(checkRowData);
  user.deleteUserData();
  refreshDatas(users);
 }else if(optionType == "user_edit"){
  operateType = "edit";
  var checkRowData = isCheckedData();
  var user = collectionRowData(checkRowData);
  var modal_body = document.getElementById("modal-body");
  var inputElements= modal_body.getElementsByTagName("input");
  for(var i=0;i<inputElements.length;i++){
  var temp = inputElements[i].id.substring(2,inputElements[i].id.length)
  inputElements[i].value = user[temp];
  }
 }else if(optionType == "user_find"){
  var s_code = document.getElementById("s_code").value;
  var s_userName = document.getElementById("s_userName").value;
  var s_all= document.getElementById("s_all").value;
  //搜索數據
  var s_data = s_data || {};
  s_data.code = s_code;
  s_data.userName = s_userName;
  s_data.all = s_all;
  var user = New(User,[]);
  user.findUserData(s_data);
 }else{

 }
 }

 /**
 * 是否選中數據,返回選中數據的行
 */
 function isCheckedData(){
 var tbodyElement =document.getElementById("tbody");
 var trElements = tbodyElement.getElementsByTagName("tr");
 var flag = false;
 for(var i=0;i<trElements.length;i++){
  var inputElement = trElements[i].getElementsByTagName("input")[0];
  if(inputElement.checked){
  flag = true;
  return trElements[i];
  }
 }
 if(!flag){
  alert("請選擇一條記錄!");
  $('#myModal').unbind("on");
 }
 }

效果圖:

如果大家還想深入學習,可以點擊這里進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論