代码很简单,实现的功能也很简单,有需要的小伙伴参考下吧。
<head runat="server"> <title></title> <!--easyui --> <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" /> <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" /> <link href="../../css/function.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../script/jquery-1.8.2.js"></script> <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_TW.js"></script> <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../script/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <!--上传控件 --> <link href="../../css/images/style.css" rel="stylesheet" type="text/css" /> <script type='text/javascript' src="../../script/swfupload/swfupload.js"></script> <script type='text/javascript' src="../../script/swfupload/swfupload.queue.js"></script> <script type="text/javascript" src="../../script/swfupload/swfupload.handlers.js"></script> <script src="../../script/jquery.form.min.js" type="text/javascript"></script> <script type="text/javascript" src="../../script/function.js"></script> <!--编辑器 --> <script type="text/javascript" charset="utf-8" src="../../editor/kindeditor-min.js"></script> <script type="text/javascript" charset="utf-8" src="../../editor/lang/zh_CN.js"></script> <script type="text/javascript"> /* jquery easyui 操作*/ window.onload = function () { InitGird(); } //加载编辑器 var editor; $(function () { editor = KindEditor.create('textarea[name="Describe"]', { resizeType: 1, uploadJson: '../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1', fileManagerJson: '../ashx/upload_ajax.ashx?action=ManagerFile', allowFileManager: true }); }); //初始化上传控件 $(function () { InitSWFUpload("../ashx/upload_ajax.ashx", "Filedata", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1); }); //搜索 function Search() { $('#dgCaseInfo').datagrid('load', { action: "loadListPage", Names: $("#Names").val() }); } //初始化表格 function InitGird() { $("#dgCaseInfo").datagrid({ autoRowHeight: false, loadMsg: '正在努力加载中...', url: '../ashx/GetSm_CaseInformation.ashx?types=loadListPage', //请求数据的页面 sortName: 'ID', //排序字段 idField: 'ID', //标识字段,主键 iconCls: '', //标题左边的图片 singleSelect: true, width: '100%', //宽度 height: 'auto', //高度 nowrap: true, //是否换行,True 就会把数据显示在一行里 striped: true, //True 奇偶行使用不同背景色 collapsible: false, //可折叠 sortOrder: 'desc', //排序类型 remoteSort: true, //定义是否从服务器给数据排序 fit: true, singleSelect: true, //是否只允许选择一行 selectOnCheck: false, //单击复选框不会选中行 fitColumns: true, //列自动缩放 columns: [[ { field: 'Name', title: '商品名称', width: 200, align: 'left' }, { field: 'Add_Time', title: '添加时间', width: 100, align: 'left' }, { field: 'Describe', title: '描述', width: 100, align: 'left', hidden: true }, { field: 'FilePath', title: '案例照片', width: 100, align: 'left', formatter: function (value, row, index) { if (row.FilePath != "") { return '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="../..' + row.FilePath + '"width="100px" height="25px"/></a>' } else { return "暂无图片" } } }, { field: 'Flag', title: '状态', width: 100, align: 'left', formatter: function (value, row, index) { if (row.Flag == 0) { return "上架"; } else { return "下架"; } } }, { field: 'TypeID', title: '商品类型', width: 100, align: 'left', hidden: true }, { field: 'MonadID', title: '企业名称', width: 100, align: 'left', hidden: true }, { field: 'MonadName', title: '企业名称', width: 100, align: 'left', hidden: true } ]], toolbar: "#toolbar", queryParams: { "action": "query" }, pagination: true, //是否开启分页 pagePosition: 'bottom', //分页位置 pageNumber: 1, //默认索引页 pageSize: 10, //默认一页数据条数 onDblClickRow: function (rowIndex, rowData) {//行双击事件 Edit(); } }) } var url; //添加一条数据 function Add() { $("#tdLeft").remove();//删除秒杀时间td $("#tdSeckill").remove(); //删除秒杀时间td loadTypeID(); editor.html(""); $('#dlg').dialog('open').dialog('setTitle', '添加'); $('#form1').form('clear'); url = '../ashx/GetSm_CaseInformation.ashx?types=ListAdd'; $("input[name='Flag']").eq(0).attr('checked', 'true'); } //编辑修改 function Edit() { $("#tdLeft").remove(); //删除秒杀时间td $("#tdSeckill").remove(); //删除秒杀时间td loadTypeID(); url = '../ashx/GetSm_CaseInformation.ashx?types=ListEdit'; var row = $('#dgCaseInfo').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', '修改'); $("#imageCaseUrl").attr("src", "../.." + $('#FilePath').val()); //设置<image id="imageCaseUrl">的url editor.html(row["Describe"]); if (row["IsSeckill"]==1)//如果该商品是秒杀状态 则: { $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin" class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd" class="easyui-datetimebox" name="SeckillDateEnd" style="width:150px"></td>') //初始化easyui日期控件 $('#SeckillDateBegin').datetimebox({ required: true, showSeconds: false }); $('#SeckillDateEnd').datetimebox({ required: true, showSeconds: false }); } $('#form1').form('load', row); $("#Flag ").val(row["Flag"]); //设置状态值 } } //保存数据 function Save() { editor.sync(); $('#form1').form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (result) { if (result <= 0) { $.messager.show({ title: 'Error', msg: result.errorMsg }); } else { $('#dlg').dialog('close'); // close the dialog $('#dgCaseInfo').datagrid('reload'); // reload the user data } } }); } //删除一条数据 function destroy() { var row = $('#dgCaseInfo').datagrid('getSelected'); if (row) { $.messager.confirm('消息提示', '确定要删除吗?', function (r) { if (r) { $.post('../ashx/GetSm_CaseInformation.ashx?types=ListDel', { id: row.ID }, function (result) { if (result > 0) { $('#dgCaseInfo').datagrid('reload'); // reload the user data } else { $.messager.show( { // show error message title: 'Error', msg: result.errorMsg } ); } }, 'json'); } }); } } //加载商品类型 function loadTypeID() { $('#TypeID').combobox({ url: '../ashx/GetSm_CaseInformation.ashx?types=TypeIDLoad', valueField: 'ID', textField: 'DtyName' }); } //点击图片后激发 function ShowBigview(rowIndex) { var row = $("#dgCaseInfo").datagrid('getRows')[rowIndex]; if (row["FilePath"].toString() != "") { $.messager.alert('大图预览', '<img alt="" src=../..' + row["FilePath"] + ' width="100px" height="100px" />'); } else { $.messager.alert('消息提示', '未设置标题图片!'); } } //点击单选按钮 正常时激发 function DisDate() { $("#tdLeft").remove(); //删除秒杀时间td $("#tdSeckill").remove(); //删除秒杀时间td } //点击单选按钮 秒杀时激发 function HideDate() { $("#tdLeft").remove(); //删除秒杀时间td $("#tdSeckill").remove(); //删除秒杀时间td $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒杀时间:</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin" class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd" class="easyui-datetimebox" name="SeckillDateEnd" style="width:150px"></td>') //初始化easyui日期控件 $('#SeckillDateBegin').datetimebox({ required: true, showSeconds: false }); $('#SeckillDateEnd').datetimebox({ required: true, showSeconds: false }); } </script> </head> <body> <table id="dgCaseInfo"> </table> <div id="toolbar" style="width: 100%"> <div style="padding-top: 5px; width: 100%"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="Edit()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroy()">删除</a> </div> 产品名称:<input id="Names" name="Names" class="easyui-validatebox" type="text" /> <a id="search" href="#" onclick="Search()" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'">搜索</a> </div> <div id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;" closed="true" buttons="#dlg-buttons"> <div class="ftitle"> 产品信息</div> <form id="form1" runat="server" method="post"> <table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0" cellspacing="1"> <tr class="tab_tr" style="display: none;"> <td colspan="4"> <input name="ID" class="easyui-validatebox" /> <input name="MonadID" class="easyui-validatebox" /> </td> </tr> <tr style="height: 26px;" class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 商品名称: </td> <td class="tab_td_left"> <input name="Name" class="easyui-validatebox" required="true" style="width:150px" /> </td> <td class="tab_td_right" style="width:80px;"> 商品类型: </td> <td class="tab_td_left"> <input id="TypeID" name="TypeID" style="width: 200px" required="true" /> </td> </tr> <tr style="height: 26px; " class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 商品价格: </td> <td class="tab_td_left"> <input name="Price" class="easyui-validatebox" required="true" style="width: 150px" /> </td> <td class="tab_td_right" style="width:80px;"> 商品折扣: </td> <td class="tab_td_left"> <input id="Discount" name="Discount" style="width: 200px" /> </td> </tr> <tr style="height: 26px; " class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 库存数量: </td> <td class="tab_td_left"> <input id="InventoryNumber" name="InventoryNumber" style="width: 150px" /> </td> <td class="tab_td_right" style="width:80px;"> 卖出件数: </td> <td class="tab_td_left"> <input id="SellNumber" name="SellNumber" style="width: 200px" /> </td> </tr> <tr style="height: 26px; " class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 状 态: </td> <td class="tab_td_left"> 上架<input name="Flag" type="radio" value="0" />    下架<input name="Flag" type="radio" value="1" /> </td> <td class="tab_td_right" style="width:80px;"> 是否热销: </td> <td class="tab_td_left"> 正常<input name="IsHotSell" type="radio" value="0" />    热销<input name="IsHotSell" type="radio" value="1" /> </td> </tr> <tr style="height: 26px; " class="tab_tr" id="trSeckill"> <td class="tab_td_right" style="width:80px;"> 秒杀状态: </td> <td class="tab_td_left" > 正常<input name="IsSeckill" type="radio" value="0" onclick="DisDate()"/>    秒杀<input name="IsSeckill" type="radio" value="1" onclick="HideDate()"/> </td> <%-- <td class="tab_td_left" > <input id="SeckillDateBegin" disabled="disabled" class="easyui-datetimebox" name="SeckillDateBegin" data-options="required:true,showSeconds:false" style="width:150px"> 至<input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false" style="width:150px"> </td>--%> </tr> <tr style="height: 26px; " class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 产品照片: </td> <td class="tab_td_left" colspan="3"> <div> <asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left" MaxLength="255"></asp:TextBox> <a href="javascript:;" class="files"> <input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'FilePath', 'FileUpload');" /></a> <span class="uploading">正在上传,请稍候...</span> </div> </td> </tr> <tr style="height: 26px;" class="tab_tr"> <td class="tab_td_right" style="width:80px;"> 描 述: </td> <td class="tab_td_left" colspan="3"> <textarea id="Describe" name="Describe" style="width: 99%; height: 100px; visibility: hidden;" runat="server"></textarea> </td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="Save()"> 保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a> </div> </body>
以上就是本文的全部内容了,希望大家能够喜欢。