easyui_datagrid模板代码
生活随笔
收集整理的這篇文章主要介紹了
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+'\')">編輯 </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模板代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 屏幕实战效果解析：IPS/TFT/AMO
- 下一篇： Timequest的波形窗口调出