首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实战教程

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
Js 随机数产生6位数字
May 13 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JSON 数据格式介绍
Jan 13 Javascript
js document.write()使用介绍
Feb 21 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
js实现显示手机号码效果
Mar 09 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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
追加文本(1) canvas(2) 文字识别(1) flex-shrink(1) SFTP(3) 图片模糊(1) flex(1) GNN(1) 选择器(1) 匹配文本(1)
You might like
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js Function类型
2011/12/04 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python for循环remove同一个list过程解析
2019/08/14 Python
基于python的列表list和集合set操作
2019/11/24 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Python将二维列表list的数据输出(TXT，Excel)
2020/04/23 Python
关于九一八事变的演讲稿2014
2014/09/17 职场文书
音乐教师个人总结
2015/02/06 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android