(jquery 插件开发)怎样作出这样的效果,点击add弹出一个表(这是jqgrid...
发布网友
发布时间：2022-04-27 02:56
共6个回答
热心网友
时间：2022-04-20 07:26
要对话框中生成form的可以看jquery ui demo中dialog文件夹下modal-form.html
热心网友
时间：2022-04-20 08:44
你可以下载一个叫lhgdialog的jquery组件.可以实现这个功能.
可以支持HTML内容弹出和页面弹出.
同时可以设置弹出DIV的大小,是否可以移动,出现位置,是否遮罩原层等等.追问我是在插件里写这个东西，不是需要插件来完成？求好方法？
追答你在哪里看到这个例子的?
直接用IE8或者FF做监视调式就可以了啊,看他的add启动了哪个事件,或者说,所属的DIV或者其他什么元素class绑定了哪个方法.
如果你确定这个是jqgrid组件内部就可以完成的效果,你把他调用的function跟踪出来就可以了.
热心网友
时间：2022-04-20 10:19
大概就是触发click事件，弹出一个dialog，点击确定按钮，把数据追加到table里
其实嘛挺简单的，写起来就费事
热心网友
时间：2022-04-20 12:10
组件名称jquery easyui
热心网友
时间：2022-04-20 14:18
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"></html>
<html>
<head>
<title>员工信息</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css"></link>
<script type="text/javascript" src="js/js/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gridTable").jqGrid({
url:'employeeView.action',
datatype: 'json',
height: 350,
colNames:['员工编号 ',' 姓名 ', '性别 ', '出生日期 ','部门 ','备注 '],
colModel:[
{name:'eid',index:'eid',width:80},
{name:'ename',index:'ename asc, invdate', width:80},
{name:'esex', index:'esex', width:80},
{name:'birthday', index:'birthday',width:120, align:"right"},
{name:'department', index:'department', width:120, align:"right"},
{name:'eremark', index:'eremark', width:150, sortable:false}
],
sortname:'id',
//sortorder:'asc',
viewrecords:true,
pgtext:'第{0}页 共{1}页',
recordtext:'第 {0} - {1}条记录 ',
rowNum:10,
rowList:[10,20,30],
jsonReader: {
root:"dataRows", // 数据行（默认为：rows）
page: "pages", // 当前页
total: "totals", // 总页数
records: "records", // 总记录数
repeatitems : false // 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
},
prmNames : {
search : "search",
rows:"pageModel.rows",
page:"pageModel.page",
//sort:"page.orderBy",
//order:"page.order"
},
pager:"#gridPager",
caption: "员工信息 "
});
// 配置对话框
$("#consoleDlg").dialog({
autoOpen: false,
modal: true, // 设置对话框为模态（modal）对话框
resizable: true,
width: 480,
buttons: { // 为对话框添加按钮
"取消": function() {$("#consoleDlg").dialog("close")},
"添加": addEmployee,
"保存": updateEmployee,
"删除": deleteEmployee
}
});
});
var openDialog4Adding = function() {
var consoleDlg = $("#consoleDlg");
var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");
consoleDlg.find("input").removeAttr("disabled").val("");
dialogButtonPanel.find("button:not(:contains('取消'))").hide();
dialogButtonPanel.find("button:contains('添加')").show();
consoleDlg.dialog("option", "title", "添加员工信息 ").dialog("open");
};
var openDialog4Updating = function() {
var consoleDlg = $("#consoleDlg");
var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");
consoleDlg.find("input").removeAttr("disabled");
dialogButtonPanel.find("button:not(:contains('取消'))").hide();
dialogButtonPanel.find("button:contains('保存')").show();
consoleDlg.dialog("option", "title", "修改员工信息");
loadSelectedRowData();
}
var openDialog4Deleting = function() {
var consoleDlg = $("#consoleDlg");
var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");
consoleDlg.find("input").attr("disabled", true);
dialogButtonPanel.find("button:not(:contains('取消'))").hide();
dialogButtonPanel.find("button:contains('删除')").show();
consoleDlg.dialog("option", "title", "删除员工");
loadSelectedRowData();
}
var loadSelectedRowData = function() {
var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow");
if (!selectedRowId) {
hiAlert("请先选择需要编辑的行!");
return false;
} else {
var params = {
"employee.eid" : selectedRowId
};
// 从Server读取对应ID的JSON数据
$.ajax( {
url : "employee_find.action",
data : params,
dataType : "json",
cache : false,
error : function(textStatus, errorThrown) {
hiAlert("系统ajax交互错误: " + textStatus);
},
success : function(data, textStatus) {
// 如果读取结果成功，则将信息载入到对话框中
var rowData = data.person;
var consoleDlg = $("#consoleDlg");
consoleDlg.find("#selectId").val(rowData.id);
consoleDlg.find("#ename").val(rowData.ename);
consoleDlg.find("#esex").val(rowData.esex);
consoleDlg.find("#birthday").val(rowData.birthday);
consoleDlg.find("#department").val(rowData.department);
consoleDlg.find("#eremark").val(rowData.eremark);
// 根据新载入的数据将表格中的对应数据行一并更新一下
var dataRow = {
id : data.employee.eid, // 从Server端得到系统分配的id
ename :ename,
esex : esex,
birthday: birthday,
department: department,
eremark:eremark
};
$("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);
// 打开对话框
consoleDlg.dialog("open");
}
});
}
};
//数据更新
function updateEmployee() {
var consoleDlg = $("#consoleDlg");
var eid = $.trim(consoleDlg.find("#selectId").val());
var eanme = $.trim(consoleDlg.find("#eanme").val());
var esex = $.trim(consoleDlg.find("#esex").val());
var birthday = $.trim(consoleDlg.find("#birthday").val());
var department = $.trim(consoleDlg.find("#department").val());
var eremark = $.trim(consoleDlg.find("#eremark").val());
var params = {
"employee.eid" : eid,
"employee.ename" : ename,
"employee.esex" : esex,
"employee.birthday" : birthday,
"employee.department" : department,
"employee.eremark" : eremark
};
var actionUrl = "employee_update.action";
$.ajax( {
url : actionUrl,
data : params,
dataType : "json",
cache : false,
error : function(textStatus, errorThrown) {
alert("系统ajax交互错误: " + textStatus);
},
success : function(data, textStatus) {
if (data.ajaxResult == "success") {
var dataRow = {
id : data.employee.eid, // 从Server端得到系统分配的id
ename :ename,
esex : esex,
birthday: birthday,
department: department,
eremark:eremark
};
alert("联系人信息更新成功!");
consoleDlg.dialog("close");
$("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);
} else {
alert("修改操作失败!");
}
}
});
};
var addEmployee = function() {
var consoleDlg = $("#consoleDlg");
var eanme = $.trim(consoleDlg.find("#eanme").val());
var esex = $.trim(consoleDlg.find("#esex").val());
var birthday = $.trim(consoleDlg.find("#birthday").val());
var department = $.trim(consoleDlg.find("#department").val());
var eremark = $.trim(consoleDlg.find("#eremark").val());
var params = {
"employee.ename" : ename,
"employee.esex" : esex,
"employee.birthday" : birthday,
"employee.department" : department,
"employee.eremark" : eremark
};
var actionUrl = "employee_add.action";
$.ajax( {
url : actionUrl,
data : params,
dataType : "json",
cache : false,
error : function(textStatus, errorThrown) {
alert("系统ajax交互错误: " + textStatus);
},
success : function(data, textStatus) {
if(data.ajaxResult == "success") {
var dataRow = {
id : data.employee.eid, // 从Server端得到系统分配的id
ename :ename,
esex : esex,
birthday: birthday,
department: department,
eremark:eremark
};
var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");
if(srcrowid) {
$("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "before", srcrowid);
} else {
$("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "first");
}
consoleDlg.dialog("close");
alert("联系人添加操作成功!");
} else {
alert("添加操作失败!");
}
}
});
};
//数据删除
var deleteEmployee = function() {
var consoleDlg = $("#consoleDlg");
var pId = $.trim(consoleDlg.find("#selectId").val());
var params = {
"employee.eid" : pId
};
var actionUrl = "employee_delete.action";
$.ajax({
url : actionUrl,
data : params,
dataType : "json",
cache : false,
error : function(textStatus, errorThrown) {
alert("系统ajax交互错误: " + textStatus);
},
success : function(data, textStatus) {
if (data.ajaxResult == "success") {
$("#gridTable").jqGrid("delRowData", pId);
consoleDlg.dialog("close");
alert("联系人删除成功!");
} else {
alert("删除操作失败!");
}
}
});
};
</script>
</head>
<body>
<table id="gridTable"></table>
<div id="gridPager">
</div>
<div>
<button class="right-button02" onclick="openDialog4Adding()">添加</button>
<button class="right-button02" onclick="openDialog4Updating()">修改</button>
<button class="right-button02" onclick="openDialog4Deleting()">删除</button>
</div>
<div id="consoleDlg">
<div id="formContainer">
<form id="consoleForm">
<input type="hidden" id="selectId" />
<table class="formTable">
<tr>
<th>
姓名：
</th>
<td>
<input type="text" class="textField" id="ename"
name="ename" />
</td>
</tr>
<tr>
<th id="thusergender">
性 别：
</th>
<td>
<input type="text" class="textField" id="esex"
name="esex" />
</td>
</tr>
<tr>
<th>
出生日期：
</th>
<td>
<input type="text" class="textField" id="birthday"
name="birthday" />
</td>
</tr>
<tr>
<th>
部门：
</th>
<td>
<input type="text" class="textField" id="department"
name="department" />
</td>
</tr>
<tr>
<th>
备注：
</th>
<td>
<input type="text" class="textField" id="eremark"
name="eremark" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
热心网友
时间：2022-04-20 16:43
