流程(上)
一、新建新流程
css样式
@charset "utf-8"; /* CSS Document */ *{ margin:0px auto; padding:0px; } #wai{ width:40%; } #xj{ text-align:center; color:#fff; background-color:#060; height:60px; font-size:30px; font-weight:bold; vertical-align:bottom; line-height:85px; } #nm,#tt{ height:40px; border:#00F inset 1px; line-height:40px; vertical-align:middle; color:#060; font-weight:bold; } #user{ width:80px; height:30px; background-color:#060; color:#CFF; } .user{ background-color:#060; color:#FFF; font-weight:bold; text-align:center; } .bt{ height:40px; border:#00F inset 1px; text-align:center; vertical-align:middle; line-height:40px; } #add{ width:200px; background-color:#060; color:#fff; height:30px; font-size:18px; font-weight:bold; } #lcname { width:70%; height:25px; } #chuangjian{ width:120px; height:35px; background-color:#060; color:#FFF; font-size:20px; font-weight:bold; } .del{ width:60px; height:25px; background-color:#9F6; }
引入文件
<script src="../jquery-1.11.2.min.js"></script> <link href="xinjianliucheng.css" rel="stylesheet" type="text/css">
主页面
<body> <div id="wai"> <div id="xj">新 建 流 程</div> <div id="nm"> 请选择用户名: <select id="user"> <?php require_once"../DBDA.class.php"; $db = new DBDA(); $sql ="select * from users"; $arr = $db->query($sql); foreach($arr as $v){ echo"<option value='{$v[0]}'>{$v[2]}</option>"; } ?> </select> </div> <div id="jiedian"></div> <div class="bt"><input type="button" value="添加节点人员" id="add" /></div> <div id="tt">请输入流程名称: <input type="text" id="lcname" /></div> <div class="bt"><input type="button" value="新建" id="chuangjian" /></div> </div> </body> <script type="text/javascript"> //定义一个空数组 var arr = new Array(); $("#add").click(function(){ //取出选中的值 var uid = $("#user").val();//下拉列表的value值 //取下拉选中的内容 var options = $("#user option:selected"); var name = options.text(); if(ifArrVal(arr,uid)<0){ var arrmin = new Array(uid,name);//定义一个小数组,数组的值为uid和name值 arr.push(arrmin);//把小数组放进定义的大数组中成为一个二维数组 xianshi(); }else{ alert("该用户已经存在"); }//判断二维数组中是否存在某个值 }) //点击创建按钮 $("#chuangjian").click(function(){ var lcname = $("#lcname").val(); var str = ""; for(var i=0;i<arr.length;i++){ str +=arr[i][0]+"|"; } str = str.substr(0,str.length-1); $.ajax({ url:"chuli.php", data:{lcname:lcname,uids:str}, type:"POST", dataType:"TEXT", success: function(data){ alert("创建成功"); } }) }) //显示选中的人员 function xianshi(){ var str = ""; for(var i=0;i<arr.length;i++){ str += "<div class='user'><span class='order'>"+i+"</span> <span class='name' uid='"+arr[i][0]+"'>"+arr[i][1]+"</span> <input code='"+i+"' type='button' value='删除' class='del' /></div>"; } $("#jiedian").html(str); $(".del").click(function(){ var code = $(this).attr("code"); arr.splice(code,1);//删除数组元素,自动重新索引 xianshi(); }) } function ifArrVal(arr,value){ var bs = -1; for(var i=0;i<arr.length;i++){ if(arr[i][0]==value){ bs=1; } } return bs; }//判断二维数组中是存在某个值的方法 </script>
处理页面
<?php require_once"../DBDA.class.php"; $db = new DBDA(); $lcname = $_POST["lcname"]; $uids = $_POST["uids"]; $arr = explode("|","$uids"); //添加流程 $code = time(); $sql = "insert into liucheng values('{$code}','{$lcname}')"; if($db->query($sql,1)){ foreach($arr as $k=>$v){ $sql = "insert into flowpath values(0,'{$code}','{$v}','{$k}')"; $db->query($sql,1); } }
DBDA.class.php
<?php class DBDA{ public $host="localhost"; //服务器地址 public $uid="root"; //用户名 public $pwd="123"; //密码 public $dbname="crud"; //数据库名称 /* 执行一条SQL语句的方法 @param sql 要执行的SQL语句 @param type SQL语句的类型,0代表查询 1代表增删改 @return 如果是查询语句返回二维数组,如果是增删改返回true或false */ public function query($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ return $result->fetch_all(); } } public function strquery($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ $arr = $result->fetch_all(); $str = ""; foreach($arr as $v){ $str .= implode("^",$v)."|"; } $str = substr($str,0,strlen($str)-1); return $str; } } //返回json数据的方法 public function jsonquery($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ $arr = $result->fetch_all(MYSQLI_ASSOC);//关联数组 return json_encode($arr);//转换json //json_decode()分解json } } }