EasyUI的datagrid弹框编辑的问题
想写一个datagrid显示数据库数据，并且能够对数据进行增删改查操作。在datagrid的toolbar里面写了按钮和单击事件，但是现在要怎么在单击事件里面弹出dial...
想写一个datagrid显示数据库数据，并且能够对数据进行增删改查操作。在datagrid的toolbar里面写了按钮和单击事件，但是现在要怎么在单击事件里面弹出dialog，并且在dialog里面进行表单提交。本人新人，求指导
展开
1个回答
展开全部
给个我们项目里的一个文件给你参考下吧
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<% String path=request.getContextPath(); String basePath=request.getScheme()
+ "://" + request.getServerName() + ":" + request.getServerPort() + path
+ "/"; %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/cloudmgr.css" />
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/public.js"></script>
<script type="text/javascript" src="<%=basePath%>pages/cloudmgr/dict.js"></script>
<style type="text/css">
.texthgt{
height:60px !important;
}
</style>
</head>
<body scroll="no">
<table id="datagrid" class="easyui-datagrid" data-options="rownumbers:true,
fitColumns:true,
singleSelect:false,
toolbar:'#tb',
height:540,
loadMsg:'数据加载中,请稍后...',
url:'dictAction.do?action=getAllDicts',
method:'post'" title="集群字典管理">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true">选择</th>
<th data-options="field:'id',width:80">ID</th>
<th data-options="field:'type',width:80">类型</th>
<th data-options="field:'key',width:80">键</th>
<th data-options="field:'value',width:80">值</th>
<th data-options="field:'value2',width:80">值2</th>
<th data-options="field:'desc',width:80">描述</th>
</tr>
</thead>
</table>
<div id="tb" style="padding:2px 5px;">
类型 : <input class="easyui-textbox toolbar-text" id="search_dictid" style="width:110px">
<a href="#" class="easyui-linkbutton search-button" id="search">查 询</a>
<a href="#" class="easyui-linkbutton operate-button" id="delete">删除</a>
<a href="#" class="easyui-linkbutton operate-button" id="modify">修改</a>
<a href="#" class="easyui-linkbutton operate-button" id="add">增加</a>
</div>
<div id="edit-window" title="编辑">
<div style="padding: 10px 60px 20px 60px;">
<form id="ff" method="post">
<table cellpadding="5">
<tr>
<td>类型:</td>
<td><input class="easyui-textbox" type="text" id="edit_type" name="search.type" data-options="required:true"></input></td>
</tr>
<tr>
<td>键:</td>
<td><input class="easyui-textbox" type="text" id="edit_key" name="search.key" data-options="required:true"></input></td>
</tr>
<tr>
<td>值:</td>
<td><input class="easyui-textbox" type="text" id="edit_value" name="search.value" data-options="required:true,multiline:true"></input></td>
</tr>
<tr>
<td>值2:</td>
<td><input class="easyui-textbox" type="text" id="edit_value2" name="search.value2" data-options="required:false"></input></td>
</tr>
<tr>
<td>描述:</td>
<td><input class="easyui-textbox" type="text" id="edit_desc" name="search.desc" data-options="required:false,multiline:true"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton form-button" id="submitForm">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton form-button" id="clearForm">清除</a>
</div>
</div>
</div>
</body>
</html>
dict.js内容
//by weixj
$(function(){
$("#search").click(function(){
var queryParams = $('#datagrid').datagrid('options').queryParams;
queryParams.search_dictid = search_dictid.value;
$("#datagrid").datagrid('reload');
});
$("input",$("#search_dictid").next("span")).keydown(function(event){
var val = $(this).val();
if(event.keyCode == 13){
var queryParams = $('#datagrid').datagrid('options').queryParams;
queryParams.search_dictid = val;
$("#datagrid").datagrid('reload');
}
});
var $win = $('#edit-window').window({
title: '字典编辑',
width: 380,
height: 400,
top: ($(window).height() - 330) * 0.5,
left: ($(window).width() - 380) * 0.5,
shadow: true,
modal: true,
closed: true,
minimizable: false,
maximizable: false,
collapsible: false
});
var form = $win.find("form");
$("#edit_value").siblings("span").addClass("texthgt");
$("#edit_value").siblings("span").children("textarea").addClass("texthgt");
$("#edit_desc").siblings("span").addClass("texthgt");
$("#edit_desc").siblings("span").children("textarea").addClass("texthgt");
$("#add").click(function(){
$win.window('open');
form.form('clear');
form.url='dictAction.do?action=addDict';
});
$("#submitForm").click(function(){
form.form('submit', {
url: form.url,
success: function (data) {
data = toJson(data);
if(data.flag == 0){
$("#datagrid").datagrid('reload');
$win.window('close');
}else{
$.messager.alert('错误', data.flag, 'error');
}
}
});
});
$("#clearForm").click(function(){
form.form("clear");
});
$("#modify").click(function(){
form.form("clear");
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length == 0 || rows.length > 1){
$.messager.alert('警告', '请选择一条记录!', 'warning');
return;
}
var dictid = rows[0].id;
$.ajax({
url:'dictAction.do?action=getOneDict&search.dictid='+dictid,
type:'POST',
success:function(data){
data = toJson(data);
var dictinfo = data.dictInfo;
$win.window('open');
$("#edit_type").textbox('setValue',dictinfo.type);
$("#edit_key").textbox('setValue',dictinfo.key);
$("#edit_value").textbox('setValue',dictinfo.value);
$("#edit_value2").textbox('setValue',dictinfo.value2);
$("#edit_desc").textbox('setValue',dictinfo.desc);
form.url='dictAction.do?action=modDict&search.dictid='+dictid;
},
error:function(){
$.messager.alert('错误', '操作失败!', 'error');
}
});
});
$("#delete").click(function(){
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length == 0){
$.messager.alert('警告', '请至少选择一条记录!', 'warning');
return;
}
$.messager.confirm("操作提示", "您确定要删除这些字典吗？", function (data) {
if(data){
var dictids='';
for(var i=0;i<rows.length;i++){
if(i>0){
dictids += ",";
}
dictids += rows[i].id;
}
$.ajax({
url:'dictAction.do?action=delDict&search.dictid='+dictids,
type:'POST',
success:function(data){
data = toJson(data);
if(data.flag == 0){
$("#datagrid").datagrid('reload');
}else{
$.messager.alert('错误', data.flag, 'error');
}
},
error:function(){
$.messager.alert('错误', '操作失败!', 'error');
}
});
}
});
});
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
