easyui简单的增删该查

来源：互联网发布：淘宝客返利系统编辑：程序博客网时间：2024/04/30 22:38
easyui简单的增删改查<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>crud.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><!-- 将themes,query.min.js,jquery.easyui.min.js放在webRoot下--><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script>  <style type="text/css">  body{  font-size:14px;  }  </style>  <script type="text/javascript">  function sexFormatter(value,row,index){  if(value==1){return  '男';}else{return '女';}  }/*查询方法*/  function queryForm(){  //easyui获取文本值  var stuName=$("#stuName").textbox('getValue');  //ajax=queryStudent?sname=stuName的值  //easyui所有的方法的调用  //控件对象.控件名称('方法名')  $('#dg').datagrid('load',{sname: stuName});  }  /*修改方法*/  function submitUpdateForm(){//获取当前选择行  var selectedRow=$("#dg").datagrid("getSelected");  $('#ff').form('submit', {url:'student/'+selectedRow.sid,success: function(msg){msg=JSON.parse(msg);//获取JSON数据if(msg.code==1){$.messager.alert('提示消息','修改成功');    queryForm();$("#w").window('close');}else{$.messager.alert('错误消息',msg.message);}}});    }/*添加方法*/  function submitaddForm(){  $('#tj').form('submit', {url:'student',success: function(msg){msg=JSON.parse(msg);if(msg.code==1){$.messager.alert('提示消息','添加成功');    queryForm();$("#ww").window('close');}else{$.messager.alert('错误消息',msg.message);}}});  }  $(function(){  //设置data-options属性  $("#dg").datagrid({  toolbar:[{iconCls: 'icon-aaa',//图标text:'添加',//图标名onClick:function(){$("#ww").window('open');//打开添加的框}},{iconCls: 'icon-remove',text:'删除',onClick:function(){//获取当前选择中的多行,返回数组//getselected获取当前选中的行,返回单行数据var selectedRow=$("#dg").datagrid("getSelections");if(selectedRow==null){$.messager.alert('提示消息','请选择数据'); return;}var temp = "";$.each(selectedRow,function(key,value){temp=temp+value.sid+",";})$.ajax({url:'student/'+temp,method:'POST',dataType:'json',data:'_method=delete',success:function(msg){if(msg.code==1){$.messager.alert('提示消息','删除成功');    queryForm();}else{//$.messager.alert('错误消息',msg.message);$.messager.show({title:'我的消息',msg:msg.message,showType:'show',style:{right:'',heigth:500,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:''}});}}})}},{iconCls: 'icon-edit',text:'修改',onClick:function(){//获取当前选择中的行var selectedRow=$("#dg").datagrid("getSelected");if(selectedRow==null){$.messager.alert('提示消息','请选择数据'); return;}$("#w").window('open');$('#ff').form('load',selectedRow);}}]  })  })  </script>  </head>    <body>  学生姓名:<input id="stuName" class="easyui-textbox" type="text" name="stuname" data-options="required:true"></input>  <a href="javascript:void(0)" class="easyui-linkbutton" style="width:50px" onclick="queryForm()">搜索</a>    <div style="height:5px"></div>    <table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"data-options="singleSelect:false,collapsible:true,url:'queryStudent',method:'get',pagination:true,rownumbers:true"><thead><tr><!-- {"sid":1,"sname":"张三2号","gid":1,"age":12,"sex":1,"address":"深圳福田"} --><th data-options="field:'sid',width:80">学生编号</th><th data-options="field:'sname',width:100">学生姓名</th><th data-options="field:'age',width:80,align:'right'">年龄</th><th data-options="field:'sex',width:80,align:'right',formatter:sexFormatter">性别</th><th data-options="field:'address',width:250">地址</th></tr></thead></table><div id="w" class="easyui-window" title="修改学生信息" data-options="iconCls:'icon-edit',closed:true" style="width:320px;height:300px;padding:5px;"><div class="easyui-layout" data-options="fit:true"><form id="ff" method="post"><input type="hidden" name="_method" value="put">    <table cellpadding="5">    <tr>    <td>学生姓名:</td>    <td><input class="easyui-textbox" type="text" name="sname" data-options="required:true"></input></td>    </tr>    <tr>    <td>年龄:</td>    <td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>    </tr>    <tr>    <td>性别:</td>    <td>    <select class="easyui-combobox" name="sex" style="width: 50px">    <option value="1">男</option>    <option value="0">女</option>    </select>    </td>    </tr>    <tr>    <td>地址:</td>    <td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>    </tr>        </table>    </form>     <div style="text-align:center;padding:5px">    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateForm()">修改</a>    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>    </div></div></div><div id="ww" class="easyui-window" title="添加学生信息" data-options="iconCls:'icon-add',closed:true" style="width:320px;height:300px;padding:5px;"><div class="easyui-layout" data-options="fit:true"><form id="tj" method="post"><input  type="hidden" name="gid" value="1"/>    <table cellpadding="5">    <tr>    <td>学生姓名:</td>    <td><input class="easyui-textbox" type="text" name="sname" data-options="required:true"></input></td>    </tr>    <tr>    <td>年龄:</td>    <td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>    </tr>    <tr>    <td>性别:</td>    <td>    <select class="easyui-combobox" name="sex" style="width: 50px">    <option value="1">男</option>    <option value="0">女</option>    </select>    </td>    </tr>    <tr>    <td>地址:</td>    <td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>    </tr>        </table>    </form>     <div style="text-align:center;padding:5px">    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitaddForm()">添加</a>    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>    </div></div></div>  </body></html>
阅读全文
0 0