• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

基于jqueryUI的dialog实现弹出框与回调方法

互联网 diligentman 3小时前 1次浏览

功能描述:冷库公司需要对预约订单指派送冰员。
效果如下:
基于jqueryUI的dialog实现弹出框与回调方法
基于jqueryUI的dialog实现弹出框与回调方法
基于jqueryUI的dialog实现弹出框与回调方法

支持批量处理基于jqueryUI的dialog实现弹出框与回调方法

Ice控制器

 public function actionSetShrIdAndName($oId,$shrId){
        $shr=User::model()->find('userId='.$shrId);//根据送货人ID找到该用户信息
        $order=Ice::model()->findAll("id in (".$oId.")");//找订单
        if($order){
            foreach ($order as $v){
                $v->deliver_id=$shrId;//填入送货人信息
                $v->deliver_name=$shr->TCNAME;
                $v->deliver_tel=$shr->PHONE;
                $v->order_state='已派送';//修改状态
                $v->save();
            }
        }
        echo CJSON::encode('succeed');
    }

   public function getUserKeyWords($keywords){
        return  get_like('1','TCNAME',$keywords);
    }

    public function actionOpenDialogShr($keywords=''){
        $model = User::model();
        $criteria = new CDbCriteria;
        $criteria -> condition = $this->getUserKeyWords($keywords);
        $data = array();
        parent::_list($model, $criteria, 'select', $data);//渲染select
    }

views文件

基于jqueryUI的dialog实现弹出框与回调方法
index_appoint代码如下




<div class="box">
    <div class="box-content">
        <div class="box-header">
            <a class="btn" href="javascript:;" onclick="we.reload();"><i class="fa fa-refresh"></i>刷新</a>
            <a style="display:none;" id="j-delete" class="btn" href="javascript:;"
               onclick="chooseShr(we.checkval('.check-item input:checked'));">
                批量指定送冰员</a>

        </div><!--box-header end-->
        <div class="box-search">
            <form action="<?php echo Yii::app()->request->url; ?>" method="get">
                <input type="hidden" name="r" value="<?php echo Yii::app()->request->getParam('r'); ?>">
                <label style="margin-right:10px;">
                    <span>关键字:</span>
                    <input style="width:200px;" class="input-text" type="text" name="keywords"
                           value="<?php echo Yii::app()->request->getParam('keywords'); ?>">
                </label>
                <button class="btn btn-blue" type="submit">查询</button>
            </form>
        </div><!--box-search end-->

        <div class="box-table">
            <table class="list">
                <thead>
                <tr>
                    <th class="check"><input id="j-checkall" class="input-check" type="checkbox"></th>

                    <th width="6%"><?php echo $model->getAttributeLabel('order_name'); ?></th>
                    <th width="8%"><?php echo $model->getAttributeLabel('order_tel'); ?></th>
                    <th width="5%"><?php echo $model->getAttributeLabel('ice_amount'); ?></th>
                    <th width="25%"><?php echo $model->getAttributeLabel('order_destination'); ?></th>
                    <th width="11%"><?php echo $model->getAttributeLabel('order_time'); ?></th>
                    <th width="30%"><?php echo $model->getAttributeLabel('order_remark'); ?></th>
                    <th width="5%"><?php echo $model->getAttributeLabel('order_state'); ?></th>
                    <th width="7%">操作</th>
                </tr>
                </thead>
                <tbody>
                <?php foreach ($arclist as $v) { ?>
                    <tr>

                        <td class="check check-item">
                            <?php if ($v->order_state=='已预约'){?>

                                <input class="input-check" type="checkbox"
                                                            value="<?php echo CHtml::encode($v->id); ?>">
                            <?php }?>

                        </td>

                        <td style='text-align: center;'><?php echo $v->order_name; ?></td>
                        <td style='text-align: center;'><?php echo $v->order_tel; ?></td>
                        <td style='text-align: center;'><?php echo $v->ice_amount; ?></td>
                        <td style='text-align: center;'><?php echo $v->order_destination; ?></td>
                        <td style='text-align: center;'><?php echo $v->order_time; ?></td>
                        <td style='text-align: center;'><?php echo $v->order_remark; ?></td>
                        <td style='text-align: center;'><?php echo $v->order_state; ?></td>
                        <td>
                            <?php if ($v->order_state=='已预约'){?>
                            <button class="btn" type="button" onclick="chooseShr(<?php echo $v->id;?>);">选择送冰员</button>
                            <?php }?>
                        </td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        </div><!--box-table end-->
        <div class="box-page c"><?php $this->page($pages); ?></div>
    </div><!--box-content end-->
</div><!--box end-->
<script>


    function chooseShr(id){
        url = '<?php echo $this->createUrl("OpenDialogShr");?>'
        $.dialog.data('id',0)
        $.dialog.open(url,{
            id: 'chooseShr',
            lock:true,opacity:0.3,
            width:'1000px',
            height:'80%',
            title:'选择送冰员',
            close: function () {
                if($.dialog.data('id')>0){
                    s1='<?php echo $this->createUrl('SetShrIdAndName')?>'
                    s1=s1+'&shrId='+$.dialog.data('id')+'&oId='+id
                    $.ajax({
                        type: 'get',
                        url: s1,
                        dataType: 'json',
                        success: function(data){
                            we.reload()
                        },

                    });
                }
            }

        });
    };


</script>



select代码如下:

<div class="box">
    <div class="box-content">
        <div class="box-header">
<!--            <a class="btn" href="--><?php //echo $this->createUrl('create'); ?><!--"><i class="fa fa-plus"></i>添加用户</a>-->
            <a class="btn" href="javascript:;" onclick="we.reload();"><i class="fa fa-refresh"></i>刷新</a>

<!--            <a style="display:none;" id="j-delete" class="btn" href="javascript:;"-->
<!--               onclick="we.dele(we.checkval('.check-item input:checked'), deleteUrl);"><i-->
<!--                        class="fa fa-trash-o"></i>删除</a>-->

        </div><!--box-header end-->
        <div class="box-search">
            <form action="<?php echo Yii::app()->request->url; ?>" method="get">
                <input type="hidden" name="r" value="<?php echo Yii::app()->request->getParam('r'); ?>">
                <label style="margin-right:10px;">
                    <span>关键字:</span>
                    <input style="width:200px;" class="input-text" type="text" name="keywords"
                           value="<?php echo Yii::app()->request->getParam('keywords'); ?>">
                </label>
                <button class="btn btn-blue" type="submit">查询</button>
            </form>
        </div><!--box-search end-->
        <div class="box-table">
            <table class="list">
                <thead>
                <tr>
<!--                    <th class="check"><input id="j-checkall" class="input-check" type="checkbox"></th>-->
                    <th><?php echo $model->getAttributeLabel('userId'); ?></th>
                    <th><?php echo $model->getAttributeLabel('TCNAME'); ?></th>
                </tr>
                </thead>
                <tbody>
                <?php foreach ($arclist as $v) { ?>
                    <tr  data-id="<?php echo $v->userId;?>"  >
<!--                        <td class="check check-item"><input class="input-check" type="checkbox" value="--><?php //echo CHtml::encode($v->userId); ?><!--"></td>-->
                        <td style='text-align: center;'><?php echo $v->userId; ?></td>
                        <td style='text-align: center;'><?php echo $v->TCNAME; ?></td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        </div><!--box-table end-->
        <div class="box-page c"><?php $this->page($pages); ?></div>
    </div><!--box-content end-->
</div><!--box end-->
<script>
    var deleteUrl = '<?php echo $this->createUrl('delete', array('id' => 'ID')); ?>';
    $(function(){
        let api = $.dialog.open.api;	// 			art.dialog.open扩展方法
        api.button(
            {
                name: '取消'
            }
        );
        $('.box-table tbody tr').on('click', function(){
            console.log($(this).attr('data-id'))
            if($(this).attr('data-id')){
                $.dialog.data('id',$(this).attr('data-id'));
                $.dialog.close();
            }
        });
    });
</script>


说明:
1.

<?php echo $this->createUrl('SetShrIdAndName')?>

上述代码表示输出一个路径,该路径对应当前控制器的SetShrIdAndName方法

<?php echo $this->createUrl('ControllerName/ActionName')?>

上述代码表示输出一个路径,该路径对应ControllerName控制器的ActionName方法

$.ajax({
       type: 'get',
       url: s1,
       dataType: 'json',
       success: function(data){
        we.reload()
        },
      });

$.ajax 在jquery用于请求。即浏览器(前端)请求服务器端(后端)。
需要写url,就能请求对应控制器的接口。可以使用第1点的createUrl方法生成,如果还要传递参数,可以使用字符串拼接的方法构造url。或者书写形如 data:{ 参数名1:参数值1,参数名2:参数值2}
success后调用回调函数。和微信小程序中的wx.request类似。


程序员灯塔
转载请注明原文链接:基于jqueryUI的dialog实现弹出框与回调方法
喜欢 (0)