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 相关文章推荐
jQuery find和children方法使用
Jan 31 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
使用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
PHP模板引擎SMARTY
2006/10/09 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
JavaScript基本对象
2007/01/11 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python如何实现动态数组
2019/11/02 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Pycharm修改python路径过程图解
2020/05/22 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
《假如》教学反思
2014/04/17 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android