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