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>