Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目 - Go语言中文社区

Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目


经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据;

 图示:

 

实例:前台的代码

  1. <span style="font-size:18px;">   <%--表格显示区--%>  
  2.     <table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;  
  3.  height: 400px;" idfield="itemid" pagination="true" iconcls="                                                                icon-save" remoteSort="false"   
  4.         data-options="rownumbers:true,  
  5.         url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],  
  6.         method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">  
  7.        <%--url是获取数据的地址--%>  
  8.        <%--url:'JSON.ashx/ProcessRequest'--%>  
  9.          <%-- 表格标题--%>  
  10.         <thead >  
  11.             <tr >  
  12.                <th  data-options="field:'ScoreStyleID',checkbox:true"> 打分项目类别ID</th>  
  13.                 <th  data-options="field:'ScoreStyleName',width:100",sortable:"true">打分项目类别名称</th>  
  14.                 <th  data-options="field:'ScoreStyleState',width:120,align:'right'">打分项目类别描述</th>  
  15.                 <th  data-options="field:'Score',width:120,align:'right'">打分项目单位分数</th>  
  16.                 <th  data-options="field:'ScoreItem',width:100">打分项目单位</th>  
  17.                 <th  data-options="field:'AdminID',width:100">管理员</th>                                               
  18.                 <th  data-options="field:'PublishDate',width:100">发布时间</th>  
  19.             </tr>  
  20.         </thead>  
  21.          <%--表格内容--%>  
  22.         <tbody>  
  23.             
  24.         </tbody>  
  25.     </table></span>  


上面主要是设定table的属性,具体每个属性大家可以详细查中文文挡来深入学习

下面是关于增删改查的代码:

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"var url;  
  2.         //添加管理员  
  3.         function newUser() {  
  4.             $('#dlg').dialog('open').dialog('setTitle''添加管理员');//设定表头  
  5.             $('#fm').form('clear');//清空窗体数据  
  6.             document.getElementById("test").value = "add";//设定表示为后台调不同方法数据提供接口  
  7.   
  8.         }  
  9.         //修改管理员  
  10.         function editUser() {  
  11.             $('#fm').form('clear');  
  12.             var row = $('#tt').datagrid('getSelected');  
  13.             if (row) {  
  14.                 $('#dlg').dialog('open').dialog('setTitle''修改管理员');  
  15.                 //绑定数据列表  
  16.                 $('#firstname').val(row.ScoreStyleName);  
  17.                 $('#lastname').val(row.Score);  
  18.                 $('#unit').val(row.ScoreItem);  
  19.                 $('#message').val(row.ScoreStyleState);  
  20.                 $('#ID').val(row.ScoreStyleID);  
  21.                 document.getElementById("test").value = "modify";//设定表示为后台调不同方法数据提供接口  
  22.                 $('#fm').form('load', row);  
  23.   
  24.             }  
  25.         }  
  26.         //保存信息  
  27.         function saveUser() {  
  28.             //获取页面中输入的值  
  29.             var firstname = document.getElementById("firstname").value;  
  30.             var lastname = document.getElementById("lastname").value;  
  31.             var test = document.getElementById("test").value;  
  32.             var unit = document.getElementById( 版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
    原文链接:https://blog.csdn.net/zlin_221/article/details/46607969
    站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 21:47:30
  • 阅读 ( 1128 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢