easyui_datagrid模板代码

<!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',//请求的urlrownumbers : true,//显示行号fit : false,//是否填满整个窗体，true:是 false:否  如果是嵌套在easyui布局中我们一般使用true,否则这个属性我们选择falsestriped: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+'\')">编辑&nbsp;&nbsp;</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>

easyui_datagrid模板代码相关推荐

vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
为了提高工作效率：通过pycharm的模板代码减少重复工作
摘要在常见的业务开发场景下,经常要开发大量重复的代码,这里代码耗时但又必要,就像我们写分析报告一样,每次都要为固定的格式耗费精力.我们可以更加日常开发经验总结出一些常用的模板代码来帮助我们实现一秒五 ...
flask 常见关系模板代码
以下罗列了使用关系型数据库中常见关系定义模板代码一对多示例场景: 用户与其发布的帖子(用户表与帖子表) 角色与所属于该角色的用户(角色表与多用户表) 示例代码 class Role(db.Mode ...
修改自动生成get/set方法模板代码
今天看到面对接口脏数据你还在V层if str==null else setText? 一文,觉着写得挺好,开发过程中多思考多动手,会带来意想不到的效果.底下评论大家也都说了各自的方法和见解,文中有一 ...
C++编程进阶6（public继承与组合、private继承、多重继承、处理模板基类内的名称、如何避免模板代码膨胀）
二十一.public继承与组合 public继承是是子类对象is a基类对象的关系,比如QT中的所有组件类都要继承QObject,所以所有的QT组件都是一个QObject. 而组合是has a(包含) ...
网上税务html模板,HTML黑色欧美形式税务动态邮件网页模板代码
模板描述:黑色欧美形式税务动态邮件.HTML黑色欧美形式税务动态邮件网页模板代码HTML模板下载代码结构 1. HTML代码 Lorem ipsum dolor sit amet, consec ...
日志模板html源码,HTML红色欧美形式教堂动态日志网页模板代码
模板描述:红色欧美形式教堂动态日志.HTML红色欧美形式教堂动态日志网页模板代码HTML模板下载代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Opening Hours - 1 ...
模板使用自定义类型_「Shopify模板」Shopify模板编辑Shopify模板代码更改教程
Shopify模版是决定在线商店外观的模板.不同模版的样式和布局有所不同,可为客户提供不同的体验.例如,如果您销售的是水疗产品,那么您可能希望您的在线商店给人一种放松和奢华的感觉.或者,如果您销售的是 ...
模板代码复用的三种方式: 宏, 继承, 包含
模板代码复用在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容多个模板中具有相同的模板代码内容,但是内容中部分值不一样多个模板中具有完全相同的 html 代码块内容宏对宏( ...
在pycharm中自定义模板代码,快速输出固定代码块
pycharm中有时会经常输出固定一段代码,为避免每次重复输入,可以自定义一段模板代码,请看以下图教程: 1. 点击 file 里面的 setting 2. 在搜索框输入live,就会显示出 ...

easyui_datagrid模板代码

easyui_datagrid模板代码相关推荐

最新文章

热门文章