<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery_easyui模板代码</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.7.0/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.7.0/themes/icon.css" />
<script type="text/javascript" src="js/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
<style>
a{
text-decoration:none
}
.datagrid-cell{/* 设置单元格的样式 */
font-size:14px;
height:30px;
line-height:30px;
}
.datagrid-cell-rownumber{/* 设置行号样式 */
font-size:14px;
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<!-- 表格 -->
<table id="dg"></table>
<!-- 工具栏 -->
<div id="tt" style="padding: 5px; height: auto">
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="doAdd()">上报</a>
<!-- 搜索栏 -->
<div style="margin-top: 2px; float: right">
<form id="searchForm" action="" method="post">
<input class="easyui-textbox" id="title" name="title" data-options="prompt:'标题'" style="width:150px;">
<select class="easyui-combobox" id="type" name="type" data-options="panelHeight:'auto'" style="width:100px;">
<option value="">全部类型</option>
<option value="0">领导活动</option>
<option value="1">常规信息</option>
<option value="2">外埠动态</option>
<option value="3">问题建议</option>
</select>
<select class="easyui-combobox" id="status" name="status" data-options="panelHeight:'auto'" style="width:100px;">
<option value="0">选择状态</option>
<option value="1">汇要采用</option>
<option value="2">单条采用</option>
<option value="3">单篇采用</option>
</select>
<input class="easyui-datetimebox" id="begin" name="begin" data-options="prompt:'开始时间'" style="width:150px;">
<input class="easyui-datetimebox" id="end" name="end" data-options="prompt:'结束时间'" style="width:150px;">
<a href="javascript:void(0);" plain="true" class="easyui-linkbutton" iconCls="icon-search" onclick="searchGrid()">查询</a>
</form>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#dg").datagrid({
url:'http://192.168.8.95:8080/app/report/xml/xinxi_approve_list_xml.jsp',//请求的url
rownumbers : true,//显示行号
fit : false,//是否填满整个窗体，true:是 false:否 如果是嵌套在easyui布局中我们一般使用true,否则这个属性我们选择false
striped:true,//奇偶显示不同的颜色
toolbar : "#tt",//定义工具栏
fitColumns : true,//自动扩大或缩小列的尺寸以适应网格的宽度
pagination:true,//分页,会在底部出现分页栏 true:显示分页栏 false:不显示分页栏
pageNumber : 1,//当前页码
pageSize : 15,//每页显示15条数据
pageList : [15,20,50,100],//显示数据的选择列表
loadMsg : "请稍后,数据正在加载",//加载数据时，显示的提示消息
queryParams : {//发送参数给后台 格式为 "name":"value" ,数据可以是整型,字符串
"name":"value"
},
loadMsg : "请稍后,数据正在加载",
onDblClickRow:function(index,row){//行双击事件，作用：一般我们弹窗来显示行的信息，因为有的文字很长，会显示不全
alert(111);
},
columns:[[
{field : 'ck',checkbox : 'true',fixed:true},//这是一个带勾选的复选框
{
field:'title',
title:'标题',
align:'left',
width:fixWidth(0.2)
},
{
field:'type',
title:'信息类别',
align:'left',
width:fixWidth(0.2),
formatter:function(value,row,index){/* formatter用法1*/
if('0'==value) return '领导活动';
else if('1'==value) return '常规信息';
else if('2'==value) return '外埠动态';
else if('3'==value) return '问题建议';
}},
{
field:'dept_name',
title:'报送单位',
align:'left',
width:fixWidth(0.2)
},
{
field:'create_time',
title:'报送时间',
align:'left',
width:fixWidth(0.2),
formatter:function(value,row,index){
return value.substring(5,16);
}},
{
field:'status',
title:'采用状态',
align:'left',
width:fixWidth(0.2),
formatter:function(value,row,index){
if('0'==value || ''==value){
return '已签收';
} else {
var str = [];
if (value.indexOf('1') >= 0) {
str.push('汇要采用');
}
if (value.indexOf('2') >= 0) {
str.push('单条采用');
}
if (value.indexOf('3') >= 0) {
str.push('单篇采用');
}
return str.join(',');
}
}},
{
field:'oper',
title:'操作',
align:'left',
width:fixWidth(0.2),
formatter:formatter}/* formatter用法2，在里面定义，外面写方法的逻辑，好处：更加整洁，可读性好，推荐 */
]]
});
function formatter(value,row,index){
var str='<div class="easyui-panel">';
str +='<a href="javascript:void(0);" onclick="doEdit(\''+row.id+'\')">编辑 </a>';
str +='<a href="javascript:void(0);" onclick="doDel(\''+row.id+'\')">删除</a>';
str+='</div>';
return str;
}
});
/*这两句是给easyui设置列宽的 作用：因为电脑的分辨率不一样，为了兼容性*/
//easyui表格高度
function fixHeight(percent){
return (document.body.clientHeight) * percent ;
}
//easyui表格宽度
function fixWidth(percent){
return (document.body.clientWidth - 5) * percent ;
}
//刷新表格
function reloadTable(){
$('#dg').datagrid('reload');
}
//条件搜索框
function searchGrid() {
var title=$("#title").val();
var type=$("#type").combobox('getValue');
var status=$("#status").combobox('getValue');
var begin=$("#begin").datetimebox('getValue');
var end=$("#end").datetimebox('getValue');
var param = $("#dg").datagrid("options").queryParams;
param.title=title;
param.type=type;
param.status=status;
param.begin=begin;
param.end=end;
$("#dg").datagrid("load");//重新加载数据表格
}
//新增
function doAdd(){
}
//删除
function doDel(id){
parent.$.messager.confirm('提示','您确定要删除吗？',function(result){
if(result){
$.ajax({
url:'<%=path%>/app/report/action/xxbs_delete_action.jsp',
method:'post',
data:{"id":id},
success:function(data){
if(data.status){
alert(data.msg);
reloadTable();/* 刷新页面 */
}else{
alert(data.msg);/* 输出错误信息 */
}
}
});
}
});
}
//编辑
function doEdit(id){
//alert(id);
add('编辑','<%=path%>/app/report/edit.jsp?id='+id,'pencil',1200,520);
}
</script>
</body>
</html>
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
