使用jquery-easyui写的CRUD插件(2)
2010-10-13 20:49
337 查看
首先定义变量
代码
<!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="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script language="javascript" src="../jquery-1.4.2.min.js"></script>
<script language="javascript" src="../plug/jquery.easyui.min.js"></script>
<script language="javascript" src="../plug/locale/easyui-lang-zh_CN.js"></script>
<script language="javascript" src="../plug/jquery.uigrid.js"></script>
<script language="javascript">
/**$(function(){
$('#test').crudUIGrid(
{
title:'学生信息',
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
}
);
});*/
$(function(){
var win = 'type-window';//添加部分代码的div的名称
$('#test').crudUIGrid(
{
addTypeName : win,
gridurl : 'datagrid_data.json',
addurl : '/idep_b/page/warning/newtype.do?method=save',
loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',
editurl : '/idep_b/page/warning/newtype.do?method=save',
delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]]
}
);
});
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
}
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'));
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
function mergeCells(){
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
}
//关闭窗体
function closeWindow(){
$('#type-window').window('close');
}
</script>
</head>
<body>
<h1>CRUD表格</h1>
<div style="margin-bottom:10px;">
<a href="#" onClick="resize()">resize</a>
<a href="#" onClick="getSelected()">getSelected</a>
<a href="#" onClick="getSelections()">getSelections</a>
<a href="#" onClick="clearSelections()">clearSelections</a>
<a href="#" onClick="selectRow()">selectRow</a>
<a href="#" onClick="selectRecord()">selectRecord</a>
<a href="#" onClick="unselectRow()">unselectRow</a>
<a href="#" onClick="mergeCells()">mergeCells</a>
</div>
<table id="test"></table>
<!--添加部分代码-->
<div id="type-window" title="告警类型维护" style="width:600px;height:320px;">
<div style="padding:0px 0px 0px 0px;">
<table width="98%" border="1" bordercolor="#a8d1e7" class="masktable">
<tr>
<th colspan="4" class="title"><div class="bgimg">告警类型</div></th>
</tr>
<tr>
<th>
告警实体:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警级别:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警状态:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警阀值:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警时间间隔:
</th>
<td class="input_bg">
(分钟)
</td>
</tr>
<tr>
<th>
接收人员手机号:
</th>
<td class="input_bg">
<input type="button" class="btn-style-01" value="查询" onClick="queryPersonName();"/>
</td>
</tr>
</table>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="" id="btn-save" class="easyui-linkbutton" icon="icon-ok">保存</a>
<a href="javascript:void(0)" onClick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
[/code]
因为这里上传附件的大小有限,所以将程序的源代码放到我的另一个博客的路径下
如果想要源码的话可以去下载。
http://lgstarzkhl.javaeye.com/admin/blogs/784141
下载后在html/t_4.html文件就是,在后面我会继续加入与后台通信的代码来完善整个工程。
代码
<!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="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script language="javascript" src="../jquery-1.4.2.min.js"></script>
<script language="javascript" src="../plug/jquery.easyui.min.js"></script>
<script language="javascript" src="../plug/locale/easyui-lang-zh_CN.js"></script>
<script language="javascript" src="../plug/jquery.uigrid.js"></script>
<script language="javascript">
/**$(function(){
$('#test').crudUIGrid(
{
title:'学生信息',
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
}
);
});*/
$(function(){
var win = 'type-window';//添加部分代码的div的名称
$('#test').crudUIGrid(
{
addTypeName : win,
gridurl : 'datagrid_data.json',
addurl : '/idep_b/page/warning/newtype.do?method=save',
loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',
editurl : '/idep_b/page/warning/newtype.do?method=save',
delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b,order){
return (a>b?1:-1)*(order=='asc'?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]]
}
);
});
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
}
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'));
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
function mergeCells(){
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
}
//关闭窗体
function closeWindow(){
$('#type-window').window('close');
}
</script>
</head>
<body>
<h1>CRUD表格</h1>
<div style="margin-bottom:10px;">
<a href="#" onClick="resize()">resize</a>
<a href="#" onClick="getSelected()">getSelected</a>
<a href="#" onClick="getSelections()">getSelections</a>
<a href="#" onClick="clearSelections()">clearSelections</a>
<a href="#" onClick="selectRow()">selectRow</a>
<a href="#" onClick="selectRecord()">selectRecord</a>
<a href="#" onClick="unselectRow()">unselectRow</a>
<a href="#" onClick="mergeCells()">mergeCells</a>
</div>
<table id="test"></table>
<!--添加部分代码-->
<div id="type-window" title="告警类型维护" style="width:600px;height:320px;">
<div style="padding:0px 0px 0px 0px;">
<table width="98%" border="1" bordercolor="#a8d1e7" class="masktable">
<tr>
<th colspan="4" class="title"><div class="bgimg">告警类型</div></th>
</tr>
<tr>
<th>
告警实体:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警级别:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警状态:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警阀值:
</th>
<td class="input_bg">
<font color="red">*</font>
</td>
</tr>
<tr>
<th>
告警时间间隔:
</th>
<td class="input_bg">
(分钟)
</td>
</tr>
<tr>
<th>
接收人员手机号:
</th>
<td class="input_bg">
<input type="button" class="btn-style-01" value="查询" onClick="queryPersonName();"/>
</td>
</tr>
</table>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="" id="btn-save" class="easyui-linkbutton" icon="icon-ok">保存</a>
<a href="javascript:void(0)" onClick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
[/code]
因为这里上传附件的大小有限,所以将程序的源代码放到我的另一个博客的路径下
如果想要源码的话可以去下载。
http://lgstarzkhl.javaeye.com/admin/blogs/784141
下载后在html/t_4.html文件就是,在后面我会继续加入与后台通信的代码来完善整个工程。
相关文章推荐
- 使用jquery-easyui写的CRUD插件(1)
- 使用jquery-easyui写的CRUD插件(2)
- 使用jquery-easyui写的CRUD插件(3)
- Jquery.EasyUI中combobox插件的使用
- Jquery.EasyUI中树形插件的使用
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
- jQuery上传插件Uploadify 3.2使用
- JQuery插件DataTables的使用
- jquery cycle插件的使用,图片幻灯片播放效果
- 使用jQuery插件realshadow实现超酷真实阴影效果
- Jquery autocomplete插件的使用示例
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
- jQuery Tags Input Plugin 插件的使用
- 在使用JQuery插件时报错:TypeError:$.browser is undefined的解决方法
- Jquery消息提示插件toastr使用详解
- 详解如何使用jquery插件jQuery.Validate实现客户端验证
- JQuery上传插件Uploadify使用详解
- Jquery插件Thickbox的使用总结及自定义设置