网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 JS结合bootstrap实现基本的增删改查功能
范文
    这篇文章主要介绍了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>
     <table id="table">
      <caption><h2>练习一</h2></caption>
      <caption>
        <button type="button" id="user_add" data-toggle="modal"
      data-target="#myModal" onclick="optionUserData(this);">新增</button>
        <button type="button" id="user_delete" onclick="optionUserData(this);">删除</button>
        <button type="button" id="user_edit" data-toggle="modal"
      data-target="#myModal" onclick="optionUserData(this);">编辑</button>
        <button type="button" id="user_find" onclick="optionUserData(this);">查询</button>
        <input type="text" id="s_code" placeholder="按工号查询">
        <input type="text" id="s_userName" placeholder="按姓名查询">
        <input type="text" id="s_all" placeholder="全文搜索">
      </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 id="myModal" role="dialog" >
      <div>
       <div>
        <div>
        <button type="button" data-dismiss="modal" aria-hidden="true"> 
          ×
        </button>
        <h4 id="myModalLabel">
          新增用户
        </h4>
        </div>
        <div id="modal-body">
        <label for="name">工号:</label>
         <input type="text" id="m_code" placeholder="请输入工号">
         <label for="name">姓名:</label>
         <input type="text" id="m_userName" placeholder="请输入姓名">
         <label for="name">性别:</label>
         <input type="text" id="m_sex" placeholder="请输入性别">
         <label for="name">密码:</label>
         <input type="text" id="m_passWord" placeholder="请输入密码">
         <label for="name">年龄:</label>
         <input type="text" id="m_age" placeholder="请输入年龄">
         <label for="name">出生日期:</label>
         <input type="text" id="m_birthday" placeholder="请输入出生日期">
        </div>
        <div>
        <button type="button"
         data-dismiss="modal">保存
        </button>
        <button type="button">提交更改</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");
      }
     }
    效果图：
    名单
    以上就是本文的全部内容，希望对大家的学习有所帮助
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 11:28:12