EasyUI datagrid easyui datagrid +dialog 加载可直接运行七

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <title>Page Title</title>
  7     <meta name="viewport" content="width=device-width, initial-scale=1">
  8     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
  9     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
 10     <script type="text/javascript"  src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 11     <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
 12     <script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
 13 </head>
 14 <body>
 15         <style type="text/css">
 16             #fm {
 17                 
 18             }
 19      
 20             .ftitle {
 21                 font-size: 14px;
 22                 font-weight: bold;
 23                 padding: 5px 0;
 24                 margin-bottom: 10px;
 25                 border-bottom: 1px solid #ccc;
 26             }
 27      
 28             .fitem {
 29                 margin-bottom: 10px;
 30             }
 31      
 32                 .fitem label {
 33                     display: inline-block;
 34                     text-align: right;
 35                      80px;
 36                     font-size: 13px;
 37                     padding-right: 10px;
 38                 }
 39      
 40                 .fitem input {
 41                      160px;
 42                 }
 43         </style>
 44     
 45 <table id="list" class="easyui-datagrid" style=" auto; height: 350px;"  toolbar="#dlg-toolbar"></table>
 46 
 47 <div id="dlg-toolbar">
 48     <table cellpadding="0" cellspacing="0" style="100%">
 49         <tr>
 50           
 51             <td style="text-align:left">
 52                 <input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
 53             </td>
 54         </tr>
 55         <tr>
 56             <td>
 57                 <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="add"  plain="true">Add</a>
 58                 <a href="#" class="easyui-linkbutton" iconCls="icon-edit" id="edit" plain="true">Edit</a>
 59                 <a href="#" class="easyui-linkbutton" iconCls="icon-clear" plain="true">Delete</a>
 60                 <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
 61             </td>
 62         </tr>
 63     </table>
 64 </div>
 65 
 66 <div id="dd" class="easyui-dialog" title="My Dialog" style="350px;height:290px;"
 67     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true" buttons="#dlg-buttons">
 68     <form id="form" method="post" style="margin-top: 20px; margin-left: 20px;">
 69         <div class="fitem"  > 
 70             <label>商品编号:</label>
 71             <input id="itemid" name="itemid" data-options="required:true"  style="" class="easyui-textbox" editable="true" />
 72         </div>
 73         <div class="fitem"  > 
 74             <label>用户名:</label>
 75             <input id="productid" name="productid" data-options="required:true"  style="" class="easyui-textbox" editable="true" />
 76         </div>
 77         <div class="fitem"  > 
 78             <label>姓名:</label>
 79             <input id="listprice" name="listprice" data-options="required:true"  style="" class="easyui-textbox" editable="true" />
 80         </div>
 81         <div class="fitem"  > 
 82             <label>操作1:</label>
 83             <input id="unitcost" name="unitcost" data-options="required:true,min:0,precision:5"  style="" class="easyui-numberbox" editable="true" />
 84         </div>
 85         <div class="fitem"  > 
 86             <label>操作2:</label>
 87             <input id="attr1" name="attr1" data-options="required:true"  style="" class="easyui-textbox" editable="true" />
 88         </div>
 89         <div class="fitem"  > 
 90             <label>操作3:</label>
 91             <input id="status" name="status" data-options="required:true"  style="" class="easyui-textbox" editable="true" />
 92         </div>
 93     </form>
 94 </div>
 95 
 96 <div id="dlg-buttons">
 97     <table cellpadding="0" cellspacing="0" style="100%">
 98         <tr>
 99             <td style="text-align:right">
100                 <a href="#" class="easyui-linkbutton" iconCls="icon-save" id='btnSave'>Save</a>
101                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
102             </td>
103         </tr>
104     </table>
105 </div>
106  
107 </body>
108 <script>
109 
110     $("#list").datagrid({
111         iconCls: "icon-add",
112         fitColumns: false,
113         loadMsg: "数据加载中......",
114         data:[ { "productid": "K9-DL-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": 12, "status": "P", "listprice": 58, "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": 12, "status": "P", "listprice": 23, "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": 12, "status": "P", "listprice": 93, "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": 12, "status": "P", "listprice": 93, "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": 92, "status": "P", "listprice": 193, "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": 92, "status": "P", "listprice": 193, "attr1": "Adult Male", "itemid": "EST-134" }] ,
115         pagination: true,
116         rownumbers: true,
117         nowrap: false,
118         showFooter: true,
119         singleSelect: true,
120 
121         columns: [[
122             {
123                 field: 'itemid', title: '编号',  50, align: 'center',
124                 formatter: function (value, row, index) {
125                     return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
126                 }
127             },
128             {
129                 field: 'productid', title: '用户名',  150, align: 'center',
130             },
131             {
132                 field: 'listprice', title: '姓名',  150, align: 'center',
133             },
134             {
135                 field: 'unitcost', title: '操作1',  100, align: 'center',
136             },
137             {
138                 field: 'attr1', title: '操作2',  100, align: 'center',
139             },
140             {
141                 field: 'status', title: '操作3',  100, align: 'center',
142             }
143         ]]
144       
145     })
146     $(function () {
147         $("#add").click(function(){
148             $('#dd').dialog({title:'创建'}).dialog('open');
149             $('#itemid').textbox("setValue",'');
150             $('#productid').textbox("setValue",'');
151             $('#listprice').textbox("setValue", '');
152             $('#unitcost').textbox("setValue", '');
153             $('#attr1').textbox("setValue", '');
154             $('#status').textbox("setValue", '');
155         });
156         $("#edit").click(function(){
157             var row = $("#list").datagrid("getSelected");
158             if(row==null){
159                 layer.msg('没有选中记录', { icon: 7 });
160                 return;
161             }
162             $('#dd').dialog({title:'修改'}).dialog('open');
163             $('#itemid').textbox("setValue",row.itemid);
164             $('#productid').textbox("setValue", row.productid);
165             $('#listprice').textbox("setValue", row.listprice);
166             $('#unitcost').textbox("setValue", row.unitcost);
167             $('#attr1').textbox("setValue", row.attr1);
168             $('#status').textbox("setValue", row.status);
169         });
170         $("#delete").click(function(){
171 
172         });
173         $("#btnSave").click(function () {
174         if ($('#form').form('validate')) {
175             $.ajax({
176                 type: 'post',
177                 url: '',
178                 data: $("#form").serialize(),
179                 success: function (result) {
180                     if (result == "True") {
181                         $('#dlg').dialog('close')
182                         $('#list').datagrid('load', { })
183                         layer.msg('保存成功', { icon: 1 });
184                     }
185                     else {
186                         layer.alert("保存失败");
187                     }
188                 }
189             });
190         }
191     });
192     });
193     
194 
195          
196 </script>
197 </html>
EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七

EasyUI datagrid easyui datagrid +dialog 加载可直接运行七
