经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据;
图示:
实例:前台的代码
-
<span style="font-size:18px;"> <%--表格显示区--%>
-
<table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;
-
height: 400px;" idfield="itemid" pagination="true" iconcls=" icon-save" remoteSort="false"
-
data-options="rownumbers:true,
-
url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],
-
method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">
-
<%--url是获取数据的地址--%>
-
<%--url:'JSON.ashx/ProcessRequest'--%>
-
<%-- 表格标题--%>
-
<thead >
-
<tr >
-
<th data-options="field:'ScoreStyleID',checkbox:true"> 打分项目类别ID</th>
-
<th data-options="field:'ScoreStyleName',width:100",sortable:"true">打分项目类别名称</th>
-
<th data-options="field:'ScoreStyleState',width:120,align:'right'">打分项目类别描述</th>
-
<th data-options="field:'Score',width:120,align:'right'">打分项目单位分数</th>
-
<th data-options="field:'ScoreItem',width:100">打分项目单位</th>
-
<th data-options="field:'AdminID',width:100">管理员</th>
-
<th data-options="field:'PublishDate',width:100">发布时间</th>
-
</tr>
-
</thead>
-
<%--表格内容--%>
-
<tbody>
-
-
</tbody>
-
</table></span>
上面主要是设定table的属性,具体每个属性大家可以详细查中文文挡来深入学习
下面是关于增删改查的代码:
-
<span style="font-size:18px;"> var url;
-
-
function newUser() {
-
$('#dlg').dialog('open').dialog('setTitle', '添加管理员');
-
$('#fm').form('clear');
-
document.getElementById("test").value = "add";
-
-
}
-
-
function editUser() {
-
$('#fm').form('clear');
-
var row = $('#tt').datagrid('getSelected');
-
if (row) {
-
$('#dlg').dialog('open').dialog('setTitle', '修改管理员');
-
-
$('#firstname').val(row.ScoreStyleName);
-
$('#lastname').val(row.Score);
-
$('#unit').val(row.ScoreItem);
-
$('#message').val(row.ScoreStyleState);
-
$('#ID').val(row.ScoreStyleID);
-
document.getElementById("test").value = "modify";
-
$('#fm').form('load', row);
-
-
}
-
}
-
-
function saveUser() {
-
-
var firstname = document.getElementById("firstname").value;
-
var lastname = document.getElementById("lastname").value;
-
var test = document.getElementById("test").value;
-
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 )
- 分类:前端