美文网首页
2018-03-29 EasyUI篇

2018-03-29 EasyUI篇

作者: 863536 | 来源:发表于2018-03-29 15:52 被阅读0次

    1.填充
    1.1

    $("#FullPomotions").datagrid({
                    title: ' ',
                    animate: true,
                    rownumbers: false,
                    collapsible: false,
                    idField: 'id',
                    singleSelect: true,     
                    fitColumns: true,
                    url: '', 
                    columns: [[
                       { field: 'id', title: 'id', width: 10, hidden: true },
                       { field: 'activeName', title: '活动名称', width: 100 },
                       { field: 'activeDescribe', title: '活动描述', width: 100 },
                       { field: 'SpecialNote', title: '特殊说明', width: 100 },
                       { field: 'activeTimeStart', title: '开始时间', width: 100 },
                       { field: 'activeTimeEnd', title: '结束时间', width: 100 },
                       { field: 'Contributive', title: '出资方', width: 100 },
                       {
                           field: 'action', title: '操作', width: 100, align: 'center',
                           formatter: function (value, row, index) {
                               //row.ID,数据id(主键)
                               var a = '<a href="#" onclick="Update(' + row.id + ')">编辑</a> ';
                               var b = ' <a href="#" onclick="Delete(' + row.id + ')">删除</a>';
                               return a + b;
                           }
                       }
                    ]],
                });
    

    1.2 待更新

    1. 添加
      //这里用的是input的classname
      $('#FullPromotionBox').form('load', {
                    ID:'',
                    ActiveName: '',
                    activeDescribe: '',
                    SpecialNote: '',
                    activeTimeStart: '',
                    activeTimeEnd:'',
                    Contributive: ''
                });
                AddorEditPromotion("添加满额促销");
    
    

    3.删除

            function Delete(id) {
                if (id == null) {
                    $.messager.alert("系统提示", "请选择要删除的信息!");
                    return;
                }
                $.messager.confirm('系统提示', '是否删除,删除后不可恢复,请慎重删除', function (r) {
                    if (r) {
                        $.post('/FullPromotion/DeleteFullPromotion?id=' + id,
                                function (data) {
                                    if (data.result) {
                                        $.messager.show({
                                            width: 200,
                                            height: 100,
                                            msg: '删除活动成功',
                                            title: "删除活动"
                                        });
                                        Refresh();
                                    } else {
                                        $.messager.alert('系统提示', data.msg, 'error');
                                    }
                                });
                    }
                });
                
    
            }
    

    4.修改

      function Update(id) {
                var selectRow = $('#FullPomotions').datagrid('getSelected');
                if (selectRow == null) {
                    $.messager.alert("系统提示", "请选择要修改的信息!");
                    return;
                }
                AddorEditPromotion("修改满额促销");
                $('#FullPromotionBox').form('load', {
                    ID:selectRow.id,
                    ActiveName: selectRow.activeName,
                    activeDescribe: selectRow.activeDescribe,
                    SpecialNote: selectRow.SpecialNote,
                    activeTimeStart: selectRow.activeTimeStart,
                    activeTimeEnd: selectRow.activeTimeEnd,
                    Contributive: selectRow.Contributive
                });
              
            }
    

    5.刷新

      function Refresh() {
                $('#FullPomotions').datagrid("reload");
            }
    

    6.函数

            AddorEditPromotion = function (data) {
                $('#FullPromotion').show().dialog({
                    title: data,
                    width: 393,
                    height: 267,
                    modal: true,
                    collapsible: false,
                    minimizable: false,
                    maximizable: false,
                    buttons: [{
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function () {
                            $.messager.confirm('提示', '确认取消创建或修改活动?', function (b) {
                                if (b) {
                                    $('#FullPromotion').dialog('close');
                                } else {
                                    //alert('取消');
                                }
                            });
                          
                        }
                    }, {
                        text: '确定',
                        iconCls: 'icon-ok',
                        handler: function () {
                            if (!ClickCheckSubmit()) {
                                return;
                            }
                            if ($('#FullPromotionBox').form('validate')) {
                                $.messager.progress({
                                    text: '正在保存....',
                                    interval: 100
                                });
                                $.ajax({
                                    type: 'post',
                                    url: '/FullPromotion/EditFullPromotion',
                                    data: $("#FullPromotionBox").serialize(),
                                    error: function () { $.messager.alert('系统提示', '提交数据到服务器失败!', 'error'); },
                                    success: function (data) {
                                        if (data.result) {
                                            $.messager.show({
                                                width: 200,
                                                height: 100,
                                                msg: '数据保存成功!',
                                                title: "保存数据"
                                            });
                                            $.messager.progress("close");
                                            $('#FullPromotion').dialog('close');
                                            Refresh();
                                            $.messager.alert('系统提示', data.msg, 'success');
                                        } else {
                                            $.messager.progress("close");
                                            $.messager.alert('系统提示', data.msg, 'error');
                                        }
                                    }
                                })
    
                            }
                        }
                    }]
                });
            }
    
    1. 验证
     function ClickCheckSubmit() {
                var activeName = $("#txtActiveName").val();
                if ($.trim(activeName) == "") {
                    $.messager.alert('系统提示', "活动名称不能为空", 'error');
                    return false;
                }
                var describe = $("#txtActiveDescribe").val();
                if ($.trim(describe) == "") {
                    $.messager.alert('系统提示', "活动描述不能为空", 'error');
                    return false;
                }
                var txtStartTime = $("#txtStartTime").datetimebox('getValue');
                if ($.trim(txtStartTime) == "") {
                    $.messager.alert('系统提示', "活动时间不能为空", 'error');
                    return false;
                }
                var txtEndTime = $("#txtEndTime").datetimebox('getValue');
                if ($.trim(txtEndTime) == "") {
                    $.messager.alert("系统提示", "活动时间不能为空", 'error');
                    return false;
                }
    
                var contributive = $("#Contributive").combobox("getValue");
                if ($.trim(contributive) == "") {
                    $.messager.alert('系统提示', "请选择出资方", 'error');
                    return false;
                }
                return true;
            }
    

    8.html 代码

     <table id="FullPomotions">
                
        </table>
    
        <div id="FullPromotion" > 
            <form id="FullPromotionBox" class="easyui-form">
                <div title="满额促销" style="padding: 20px;">
                    <table>
                        <tr><td>活动名称:</td><td><input id="txtActiveName" name="ActiveName" required="true" class="easyui-validatebox form-control" missingmessage="活动名称不能为空" style="width: 253px" /></td></tr>
                        <tr><td>活动描述:</td><td><input id="txtActiveDescribe" name="activeDescribe" required="true" class="easyui-validatebox form-control" missingmessage="活动描述不能为空" style="width: 253px" /></td></tr>
                        <tr><td>特殊说明:</td><td><input type="text" id="SpecialNote" name="SpecialNote" class="easyui-validatebox form-control" style="width: 253px" /></td></tr>
                        <tr><td>活动时间:</td><td><input class="easyui-datebox" type="text" id="txtStartTime"  name="activeTimeStart" style="width:120px;height:25px; line-height:25px" />&nbsp;至&nbsp;<input class="easyui-datebox" type="text" id="txtEndTime" style="width:120px;height:25px; line-height:25px" name="activeTimeEnd" /></td></tr>
                        <tr><td>出资方:</td><td><input type="text" class="form-control" id="Contributive" lines="true" editable="false" name="Contributive" style="width: 259px" /></td></tr>
                        <tr><td>推广范围:</td><td><input type="checkbox" id="ckbOpenPlateBlurryMatch" name="PromotionRealize" value="App专享" /> App专享 <input type="checkbox" id="ckbOpenPlateBlurry" name="PromotionRealize" value="微信专享" /> 微信专享</td></tr>
                        <tr><td>人群限制:</td><td><input type="radio" name="sex" value='male' /><label>不限制</label><input name="sex" checked type="radio" value="female" /><label>选择人群</label>  </td></tr>
                    </table>
                </div>
    
                <input type="hidden" class="form-control" id="id" lines="true" editable="false" name="ID" style="width: 259px" />
            </form>
    
        </div>
    

    相关文章

      网友评论

          本文标题:2018-03-29 EasyUI篇

          本文链接:https://www.haomeiwen.com/subject/wbnmcftx.html