datagrid的基本操作-增删改

 

 
 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 ---恢复内容结束---

 



posted @ 2015-05-13 14:12  佟多多  阅读(390)  评论(0)    收藏  举报