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


Posted in Javascript onJuly 22, 2016

提出问题:如何利用原生的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");
 }
 }

效果图:

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 #Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 #Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 #Javascript
Javascript字符串常用方法详解
Jul 21 #Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 #Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 #Javascript
如何用JS判断两个数字的大小
Jul 21 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php 远程图片保存到本地的函数类
2008/12/08 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python异常处理总结
2014/08/15 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python书单 不将就
2017/07/11 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
tensorflow 环境变量设置方式
2020/02/06 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
"序列点" 是什么
2016/07/29 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
公司出纳岗位职责
2015/03/31 职场文书
永远是春天观后感
2015/06/12 职场文书
结婚仪式主持词
2015/06/29 职场文书
诚信考试主题班会
2015/08/17 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书