Jquery Datagrid 动态分页以及CRUD(增删改查)

这是一个jsp页面中进行jquery 定义:后台业务查看请下载附件。有什么建议请留言相告,然后在进行改造! 数据库采用的是MySQL!

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>Jquery 得到所有的学生信息</title>
    <link rel="stylesheet" type="text/css" href="/jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery/themes/icon.css">
<!--  <link rel="stylesheet" type="text/css" href="/jquery/css/jquery.autocomplete.css">
    -->
<script src="/jquery/script/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/jquery/script/jquery.extends.util.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.easyui.min.js"></script>
<script type="text/javascript"  src="/jquery/script/jquery.metadata.js" ></script>
<script type="text/javascript" src="/jquery/script/jquery.validate.js"></script>
<script src="/jquery/script/jquery.layout.js" type="text/javascript" ></script>
<script type="text/javascript" src="/jquery/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="/jquery/script/joyplus.js"></script>

<script type="text/javascript" src="/jquery/script/jquery.joy.extends.js"></script>
<script src="/jquery/script/jquery.flexigrid.js" type="text/javascript" ></script>
<script type="text/javascript" src="/jquery/script/jquery.extend.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.form.js"></script>
<script type="text/javascript" src="/jquery/script/jquery.json.js"></script>

<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

  </head>
  <script>
 
  var sexs=[{id:"1",name:"男"},{id:"2",name:"女"}];
  <!--
  $(document).ready(function(){
  $("#stusex").combobox({
  data:sexs,
  valueField:'id',
  editable:false,
textField:'name'
  });
 
  $("#studentTable").datagrid({
  title:"学生信息",
  pagination:true, //分页显示
     loadMsg:"Processing, please wait …",
     rownumbers:true,
     height:'auto',
     frozenColumns:[[
{field:'ck',checkbox:true},
{title:"编号",field:'id',width:"80"}
]],
columns:[[
{title:"姓名",field:'name',width:"100"},
{title:"年龄",field:'age',width:"100"},
{title:"性别",field:'sex',width:"100",
formatter:function(value){
if(value=="1"){
return "男";
}else{
return "女";
}
}
},
{title:"联系电话",field:'tel',width:"100"}
]],
toolbar : [//工具栏上定义按钮
           {id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
           openNewWindows();
 
}
},
{
id:'btndel',
text:'Del',
iconCls:'icon-remove',
handler:function(){
//删除选择的记录
delStudent();
}
},
{
id:'btnedit',
text:'Edit',
iconCls:'icon-edit',
handler:function(){
//修改层的样式,是div 显示
$("#editStudentMessage").css({display:'block'});
//模态窗体显示
openEditStutable();
}
}
],
queryParams:{"page.pageIndex":"1","page.pageSize":"5","page.qop":"Eq"}
  });
 
  $.ajax({
   type: "post",
   async: false,//设置 同步
   url:'studentServlt',
   success: function(msg){
 
var griddata=xorderListToGridData(msg);

$('#studentTable').datagrid("loadData",griddata);

   }
  
});

//得到  studentTable 表格中的 分页对象
var pager = $('#studentTable').datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNumber, pageSize){
searchStudent(pageNumber, pageSize);
}
});
  });
 

//调用后台 业务 进行查询
    function searchStudent(pageNumber, pageSize){
    $.ajax({
       type: "get",
       url:"studentServlt?start="+pageNumber+"&end="+pageSize,
      // data: params,
       success: function(msg){
    var griddata=xorderListToGridData(msg);
    if(griddata.rows!=null){
    $('#studentTable').datagrid("loadData",griddata);
    }
       }
      
    });
    }
 
  //将数据转化为 datagrid 数据 格式
      function xorderListToGridData(msg){
          var griddata=$.JSON.decode(msg);
          return griddata;
      }
      //add 事件
      function openNewWindows(){
      //清空控件中的的值
      $("#stuid").val("");
      $("#stuname").val("");
      $("#stuage").val("");
      $("#stusex").combobox("setValue","");
      $("#stutel").val("");
      //修改层的样式,是div 显示
           $("#editStudentMessage").css({display:'block'});
      $("#editStudentMessage").dialog({
        height: 200,
        width:300,
         modal: true,//屏蔽页面
         autoOpen: false
         });
      }
      var count=1000;
      //Ok 事件
      function addStudentMessage(){
      count++;
      var datas = new  Object();
      datas.id=count;
      datas.name=$("#stuname").val();
      datas.age=$("#stuage").val();
      datas.sex=$("#stusex").combobox('getValue');
      datas.tel=$("#stutel").val();
      var ids=$("#stuid").val();
      //得到表格中的数据
      var stuData=$("#studentTable").datagrid("getData");
      if(ids != ""){
         datas.id=ids;
     
      if(stuData.rows.length !=0){
      for(var i=0;i<stuData.rows.length;i++){
      //如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改
      if(stuData.rows[i].id==ids){
     
      $('#studentTable').datagrid('getData').rows.splice(i,1,datas);
      }
      }
         }
        }else{
      stuData.total++;
      //加载行
      stuData.rows.push(datas);
      }
      $("#studentTable").datagrid("loadData",stuData);
      //关闭窗体
      $('#editStudentMessage').dialog('close');
      }
     
      //del 事件
      function delStudent(){
     
      //得到所有的数据
      var stuData=$("#studentTable").datagrid("getData");
      //得到选中的数据
      var rows=$("#studentTable").datagrid("getSelections");
      if(rows.length == 0){
       $.messager.alert("系统提示","请选择要删除的行!",'info');
       return ;
    }
   
    if(confirm('确定删除 这' + rows.length + '条记录?')){
   
   for(var i=0;i<rows.length;i++){
   for (var j=0;j<stuData.rows.length;j++)
               {
if(stuData.rows[j].id == rows[i].id){
$("#studentTable").datagrid("deleteRow",j)
}
}
   }
    
      }
      $("#studentTable").datagrid("loadData",$("#studentTable").datagrid("getData"));
     
      }
     
      //edit 事件
      function openEditStutable(){
     
      var rows = $("#studentTable").datagrid('getSelections');
if(rows == 0){
$.messager.alert("系统提示","请选择要编辑的行!",'info');
return ;
}

if(rows.length > 1){
$.messager.alert("系统提示","对不起,该操作只能选择一行!",'error');
return;
}

for(var i=0;i<rows.length;i++){
if(rows[i].id!="" ){
  $("#stuid").val(rows[i].id);
  $("#stuname").val(rows[i].name);
      $("#stuage").val(rows[i].age);
      $("#stusex").combobox('setValue',rows[i].sex);
      $("#stutel").val(rows[i].tel);
}
}
$("#editStudentMessage").dialog({
        height: 200,
        width:300,
         modal: true,//屏蔽页面
         autoOpen: false
         });
      }
     
  -->
  </script>
 
  <body>
    <form id="froms">
    <div id="allStudentDiv">
    <table id="studentTable"></table>
    </div>
   
    <div id="editStudentMessage" style="display: none">
             <input type="hidden" id="stuid"></input>&nbsp;&nbsp;&nbsp;
    姓名:<input type="text" id="stuname"></input>&nbsp;&nbsp;&nbsp;</br>
    年龄:<input id="stuage" class="easyui-numberbox" min="5.5" max="20" precision="2" required="true"/></br>
    性别:<select id="stusex" class="easyui-combobox" name="dept" style="width:150px;" required="true"></select>&nbsp;&nbsp;&nbsp;</br>
    电话:<input id="stutel" class="easyui-numberbox"  max="11"  required="true"/>&nbsp;&nbsp;&nbsp;</br>
    <input id="ok" value="OK" type="button" onclick="addStudentMessage();"/>&nbsp;&nbsp;&nbsp;<input id="cancel" value="Cancel" type="button" onclick="$('#editStudentMessage').dialog('close');">
    </div>
    </form>
  </body>
</html>

运行效果: Jquery Datagrid 动态分页以及CRUD(增删改查)_第1张图片

你可能感兴趣的:(jquery,json,mysql,Ajax,css)