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 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
js操作数组函数实例小结
Dec 10 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
基于js实现数组相邻元素上移下移
May 19 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
使用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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js获取内联样式的方法
2015/01/27 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
法律六进活动方案
2014/03/13 职场文书
升旗仪式主持词
2014/03/19 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
个人投资合作协议书
2014/10/12 职场文书
大学军训的体会
2014/11/08 职场文书
小学毕业教师寄语
2019/06/21 职场文书
导游词之西安大清真寺
2019/12/17 职场文书