QeePHP中采用Ajax实现多个输入框的联动关联查询
QeePHP中采用Ajax实现多个输入框的联动关联查询
AlanCooper 发表于3年前
QeePHP中采用Ajax实现多个输入框的联动关联查询
  • 发表于 3年前
  • 阅读 45
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

客户端页面:

<td> 

    <select name="product_id" style="width: 8em"  id="product_id"

      onchange="setNetAndSer('/far800express/index.php?controller=waybillinformation&action=setnetandser&&product_id='+this.value)">

       <option value=""></option>

            <?php   foreach ($products as $product):?>

                <option value="<?php echo $product->product_id ?>"

                <?php if ($product->product_id==$waybill->product_id): ?>

                <?php  echo "selected='selected'" ;?> <?php endif;?>><?php echo $product->product_name ?></option>

           <?php endforeach;?>

     </select>

</td>

    <td align="right">网络</td>

    <td> <input  id="network_codename="network_code" value="<?php echo $waybill->network_code;?>" type="text" style="width: 90px" onfocus="this.blur()">

    <td align="right">服务类别</td>

    <td><input id="service_codename="service_code" value="<?php echo $waybill->service_code;?>" type="text" style="width: 90px" onfocus="this.blur()">

说明:注意客户端页面中触发onchange事件之后Ajax中传递路径的写法,不同于一般绝对路径的写法,因为在框架中会先到控制器动作方法中,而不是直接到一个页面!这点儿上可能会有一些差别存在!区别之前W3c中关于Ajax部分的例子,那种写法如下:

xhr.open("post",'<?php echo url('scannedmanage/upload1')?>&file_name=' + fileList[i].name, true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; boundary=' + new Date().getTime());

xhr.send(fileList[i]);


客户端页面脚本:

function setNetAndSer(url) {

 $.ajax({

     url:url,

     type:'post',

     dataType:'json',

     success:function(result){

        if (result.net.network_name_en!=null) {

         $("#network_code").val(result.net.network_code);

                //服务

          $("#service_code").val(result.ser.service_code);

          $("#service_name_en").val(result.ser.service_name_en);

                //燃油附加费率

                   console.dir(result.baf.price_rates);

                   $("#baf").val(result.baf.price_rates);

          //主帐号

    jQuery("#main_account").empty();

    for( index in result.account)

    {

     jQuery("#main_account").append("<option value='"+result.account[index].main_account+"'>"+result.account[index].main_account+"</option>");

                 }

}

      }

  });

}

说明:注意HTML DOM操作的写法,如result.ser.service_code


后台控制器动作方法:

 function actionSetnetandser(){

     //查询产品 获取产品

     $pro = Product::find('product_id=?', request('product_id'))->getOne();

     $net = Network::find('network_id=?', $pro->network_id)->asArray()->getOne();

     $ser = Service::find('service_id=?', $pro->service_id)->asArray()->getOne();

     $baf = Baf::find('network_id=?', $pro->network_id)->asArray()->getOne();

     $account = Proxy::find('network_id=?', $pro->network_id)->asArray()->getAll();

     echo json_encode(array(

         'net' => $net,

         'ser' => $ser,

         'baf'   =>$baf,

         'account' => $account

     ));

     exit();

 }

说明: json_encode()方法将数组类型的数据转换为Json类型的,并打印输出来让客户请求端接收后台(控制器动作方法)处理的数据!




补充(于2015年3月16日):

在做项目中涉及到取件地、销售员、取件员与所属部门关联的情况,最终没有采用Ajax的方式,采用的是在后台将与所属部门对应的取件地、销售员、取件员数据分别查出来,并按对应的关联逻辑关系存放到新建的数组中,将数组数据转换为Json数据并返回到前台,前台采用jQuery的方法来控制部门的变化引起取件地、取件员、销售员的变化!

前台JS控制代码:

后台代码:

//取件地、销售员、取件员与所属部门关联
  $receive_address = array ();
  $salesperson = array ();
  $receiver = array ();
  foreach ( $departments as $department ) {
   //取件地
   $address = Area::find ( 'department_id= ?', $department->department_id )->getAll ();
   foreach ( $address as $addr ) {
    $receive_address [] = array (
     "department_id" => $department->department_id,
     "receive_address" => $addr->receive_address,
     "area_id" => $addr->area_id
    );
   }
   //销售员
   $sal = User::find ( 'department_id= ?', $department->department_id )->where ( 'salesperson = ?', 1 )->getAll ();
   foreach ( $sal as $sa ) {
    $salesperson [] = array
(
     "department_id" => $department->department_id,
     "salesperson" => $sa->user_name,
     "user_id" => $sa->user_id
    );
   }
   //取件员
   $rec = User::find ( 'department_id= ?', $department->department_id )->where ( 'receiver = ?', 1 )->getAll ();
   foreach ( $rec as $re ) {
    $receiver [] = array (
     "department_id" => $department->department_id,
     "receiver" => $re->user_name,
     "user_id" => $re->user_id
    );
   }
  }
  $area_id = Helper_Array::groupBy ( $receive_address, 'department_id' );
  $salesperson_id = Helper_Array::groupBy ( $salesperson, 'department_id' );
  $receiver_id = Helper_Array::groupBy ( $receiver, 'department_id' );
  $this->_view ["area_id"] = $area_id;
  $this->_view ["salesperson_id"] = $salesperson_id;
  $this->_view ["receiver_id"] = $receiver_id;


标签: QeePHP PHP Ajax 基础
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 67
码字总数 27450
×
AlanCooper
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: