JS结合bootstrap实现基本的增删改查功能

发布于 2017-04-01 04:46:11 | 244 次阅读 | 评论: 0 | 来源: 网友投递

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

这篇文章主要介绍了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>

 <!-- 模态框（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模态框事件
 $('#myModal').on('hide.bs.modal', function () {
  // 执行一些动作...
  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);
  }
 });

 /**
  * 首次加载页面执行方法
  */
 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");
  }
 }

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。

JS结合bootstrap实现基本的增删改查功能

Bootstrap Web前端CSS框架

后端技术

前端技术

数据库

热门框架

常用IDE

其他