基于Jquery EasyUI DataGrid操作弹框输入内容保存信息

**基于EasyUI DataGrid的弹框输入内容保存信息**

在实际开发中，我们经常需要实现数据表格的编辑功能，用户可以通过点击某一行或某一列来打开一个弹出窗口，输入新的值，然后保存这些修改。EasyUI提供了DataGrid控件，可以方便地实现这一功能。

### 一、准备工作首先，我们需要在页面中引入EasyUI的CSS和JS文件，以及Jquery库。

html<!-- 引入EasyUI CSS -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<!-- 引入Jquery 和 EasyUI JS -->
<script src="jquery-1.8.0.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>

<!-- 页面内容 -->
<div id="dg" class="easyui-datagrid" style="width:700px;height:500px"
 url="data.json"
 title="数据表格"
 toolbar="#tb">
</div>

<!-- 编辑窗口 -->
<div id="editWin" class="easyui-window" title="编辑窗口" width="400" height="200" closed="true">
 <form id="ff" method="post">
 <table>
 <tr>
 <td>名称：</td>
 <td><input type="text" name="name" id="name"></td>
 </tr>
 <tr>
 <td>年龄：</td>
 <td><input type="text" name="age" id="age"></td>
 </tr>
 </table>
 </form>
</div>

<!-- toolbar -->
<div id="tb">
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()">添加</a>
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="edit()">编辑</a>
 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="remove()">删除</a>
</div>

javascript// 编辑函数function edit() {
 var row = $('#dg').datagrid('getSelected');
 if (row) {
 // 打开弹出窗口 $('#editWin').window({
 title: '编辑窗口',
 width:400,
 height:200,
 closed: false,
 modal: true,
 onOpen: function() {
 // 填充表单数据 $('#name').val(row.name);
 $('#age').val(row.age);
 },
 onClose: function() {
 // 关闭窗口时清空表单数据 $('#ff').form('clear');
 }
 });
 } else {
 $.messager.alert('提示', '请先选择一行数据！');
 }
}

//保存函数function save() {
 var row = $('#dg').datagrid('getSelected');
 if (row) {
 // 获取表单数据 var name = $('#name').val();
 var age = $('#age').val();
 // 更新数据 $.ajax({
 type: 'POST',
 url: 'update.json',
 data: {
 id: row.id,
 name: name,
 age: age },
 success: function(data) {
 if (data.success) {
 $.messager.alert('提示', '保存成功！');
 // 刷新数据表格 $('#dg').datagrid('reload');
 } else {
 $.messager.alert('提示', data.msg);
 }
 },
 error: function(xhr, status, error) {
 $.messager.alert('提示', '保存失败！');
 }
 });
 } else {
 $.messager.alert('提示', '请先选择一行数据！');
 }
}

// 添加函数function add() {
 // 打开弹出窗口 $('#editWin').window({
 title: '添加窗口',
 width:400,
 height:200,
 closed: false,
 modal: true,
 onOpen: function() {
 // 清空表单数据 $('#ff').form('clear');
 },
 onClose: function() {
 // 关闭窗口时清空表单数据 $('#ff').form('clear');
 }
 });
}

// 删除函数function remove() {
 var row = $('#dg').datagrid('getSelected');
 if (row) {
 $.messager.confirm('确认', '确定要删除这行数据吗？', function(r) {
 if (r) {
 // 删除数据 $.ajax({
 type: 'POST',
 url: 'delete.json',
 data: {
 id: row.id },
 success: function(data) {
 if (data.success) {
 $.messager.alert('提示', '删除成功！');
 // 刷新数据表格 $('#dg').datagrid('reload');
 } else {
 $.messager.alert('提示', data.msg);
 }
 },
 error: function(xhr, status, error) {
 $.messager.alert('提示', '删除失败！');
 }
 });
 }
 });
 } else {
 $.messager.alert('提示', '请先选择一行数据！');
 }
}