标签：
1 ---恢复内容开始--- 2 3 4 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta charset="UTF-8"> 9 <title>Basic DataGrid - jQuery EasyUI Demo</title> 10 <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.2/themes/default/easyui.css"> 11 <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.2/themes/icon.css"> 12 <!--<link rel="stylesheet" type="text/css" href="../../图片/demo.css">--> 13 <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.2/jquery.min.js"></script> 14 <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.2/jquery.easyui.min.js"></script> 15 </head> 16 <body> 17 <h2>Basic DataGrid</h2> 18 <p>The DataGrid is created from markup, no JavaScript code needed.</p> 19 20 <div style="margin:20px 0;"></div> 21 22 <table id="tb" class="easyui-datagrid" toolbar="#toolbar" title="Basic DataGrid" style="width:700px;height:250px" 23 data-options="rownumbers:true,singleSelect:true,collapsible:true,url:‘{:U(return_json)}‘,method:‘get‘"> 24 25 26 27 <thead> 28 29 30 <tr> 31 <th data-options="field:‘Item_ID‘,width:80">Item ID</th> 32 <th data-options="field:‘Product‘,width:100">Product</th> 33 <th data-options="field:‘List_Price‘,width:80,align:‘right‘">List Price</th> 34 <th data-options="field:‘Unit_Cost‘,width:80,align:‘right‘">Unit Cost</th> 35 <th data-options="field:‘Attribute‘,width:250">Attribute</th> 36 <th data-options="field:‘Status‘,width:60,align:‘center‘">Status </th> 37 </tr> 38 </thead> 39 </table> 40 41 <div id="toolbar"> 42 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"onclick="newUser()">添加</a> 43 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true"onclick="editUser()">修改</a> 44 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" plain="true"onclick="saveUser()">保存</a> 45 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true"onclick="destroyUser()">删除</a> 46 47 </div> 48 49 <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" 50 closed="true" buttons="#dlg-buttons"> 51 <div class="">User Information</div> 52 <form id="fm" method="post" novalidate> 53 54 <div class="fitem"> 55 <label>Product:</label> 56 <input name="Product" class="easyui-textbox" type="text" required> 57 </div> 58 <div class="fitem"> 59 <label>List Price:</label> 60 <input name="List_Price" type="text" class="easyui-textbox"> 61 </div> 62 <div class="fitem"> 63 <label>Unit Cost:</label> 64 <input name="Unit_Cost" type="text" class="easyui-textbox"> 65 </div> 66 <div class="fitem"> 67 <label>Attribute:</label> 68 <input name="Attribute" type="text" class="easyui-textbox" > 69 </div> 70 <div class="fitem"> 71 <label>Status:</label> 72 <input name="Status" type="text" class="easyui-textbox"> 73 </div> 74 </form> 75 </div> 76 <div id="dlg-buttons"> 77 <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a> 78 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)" style="width:90px">Cancel</a> 79 </div> 80 81 82 83 84 <script type="text/javascript"> 85 var url; 86 //当创建用户时，打开一个对话框并清空表单数据。 87 function newUser(){ 88 $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘New User‘);//打开对话框 89 $(‘#fm‘).form(‘clear‘);//清空表单数据 90 91 url = ‘__URL__/insert‘; 92 } 93 //当编辑用户时，打开一个对话框并从 datagrid 选择的行中加载表单数据。 94 function editUser(){ 95 var row = $(‘#tb‘).datagrid(‘getSelected‘);//获取选中的行 96 if (row){ 97 $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘Edit User‘); 98 $(‘#fm‘).form(‘load‘,row); 99 url = ‘__URL__/update?id=‘+row.Item_ID;//获取tb表的主键，传给后台数据库 100 } 101 } 102 function saveUser(){ 103 $(‘#fm‘).form(‘submit‘,{ 104 url: url, 105 onSubmit: function(){ 106 return $(this).form(‘validate‘); 107 }, 108 success: function(result){ 109 console.log(result); 110 if (result.errorMsg){ 111 $.messager.show({ 112 title: ‘Error‘, 113 msg: result.errorMsg 114 }); 115 } else { 116 $(‘#dlg‘).dialog(‘close‘); // close the dialog 117 $(‘#tb‘).datagrid(‘reload‘); // reload the user data 118 } 119 } 120 }); 121 } 122 function destroyUser(){ 123 var row = $(‘#tb‘).datagrid(‘getSelected‘); 124 if (row){ 125 $.messager.confirm(‘Confirm‘,‘Are you sure you want to destroy this user?‘,function(r){ 126 if (r){ 127 $.post(‘__URL__/del‘,{id:row.Item_ID},function(result){ 128 if (result==1){ 129 130 $(‘#tb‘).datagrid(‘reload‘); // reload the user data 131 } else { 132 $.messager.show({ // show error message 133 title: ‘Error‘, 134 msg: result.errorMsg 135 }); 136 } 137 },‘json‘); 138 } 139 }); 140 } 141 } 142 </script> 143 </body> 144 </html> 145 146 ---恢复内容结束---
标签：
原文地址：http://www.cnblogs.com/tmn549992864/p/4500308.html
