select2插件+ajax笔记

---

手册

https://select2.org/getting-started/basic-usage

http://select2.github.io/select2/

http://video.tudou.com/v/XMjgyNjg2OTE0OA==.html?spm=a2h0k.8191414.0.0&from=s1.8-1-1.2

插件下载地址:

链接：https://pan.baidu.com/s/1XV9DOzZX3zgqKOUnvPaJ7Q 密码：gnv2

思路

1. 预加载select2的js样式
2. onchange获取select框里的数据后发送ajax
3. 控制器处理好后返回结果.
4. 如果是ecshop搜索后返回的页面,替换整个页面,需要改写call方法为JQuery的ajax,添加成品与半成品的对应关系 时需要把事件绑定到document上才能抓到页面的元素

1. 如果是自己写的ajax这样就可以了.

html里

<link href="../../js/select2/select2.css" rel="stylesheet" />

<script src="../../js/select2/select2.js"></script>

<div class="select2div"></div>

    <select  class="js-example-basic-multiple add_semi_sn_relate" name="sn_type[]" sn_id="{$sn.id}" multiple="multiple">

      {foreach from=$semi_sninfo item=v}

        <option value="{$v.sn}" {if in_array($v.sn,$sn['semi_sn_arr'])}selected="selected"{/if} >{$v.sn_name}</option>

      {/foreach}

       <!--  <option value="111" >111</option>

        <option value="222" >2222</option>

        <option value="333" >333</option>  -->

    </select>

<script type="text/javascript">

$(document).ready(function() {

$(".add_semi_sn_relate").select2(); //预加载select2效果

//添加成品与半成品的对应关系 添加对应关系时需要把事件绑定到document上才能抓到页面的元素

$(document).on("change",'.add_semi_sn_relate',function() {

   var sns = $(this).val(); //当option里的值改变时获取它里的值,如果有多个,会获取到以,号隔开的值

   var sn_id = $(this).attr('sn_id');

   var url = 'product_sn.php?act=select2addGoodsRelate&sns=' + sns + '&sn_id=' + sn_id;

   // return false;

    $.get(url,function(data,status){

      var data = data;

      // return false;

      var data = JSON.parse(data);

      if(data.code>0){

        alert(data.msg);

      }else{

        // alert(data.msg);

        // listTable.loadList();

      }

    });

});

</script>

控制器里

elseif ($_REQUEST['act'] == 'select2addGoodsRelate')

{

    $sns = empty($_REQUEST['sns']) ? '' : trim($_REQUEST['sns']);

    if($sns=='null'){

         $sns = '';

    }

    $sn_id = empty($_REQUEST['sn_id']) ? '' : trim($_REQUEST['sn_id']);

    $sql = "UPDATE wdm_product_sn SET semi_sn = '".$sns."' WHERE id = $sn_id";

    wdmlog('第'.__LINE__.'行','product_sn','select2addGoodsRelate');

    wdmlog($sql,'product_sn','select2addGoodsRelate');

    $db->query($sql);  

    $ret['code']=0;

    $ret['msg']= '添加成功';

    echo json_encode($ret,JSON_UNESCAPED_UNICODE);die;

}

2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支持,ecshop原生的call与JQuery冲突.表格上面的搜索和下面翻页需要改写

pageheader_list.htm头页面里引入 jquery.listtable.js

把 pageheader.htm复制一份改为pageheader_list.htm

在pageheader_list.htm里删除 listtable.js 引入 jquery.listtable.js

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\templates\pageheader_list.htm

{insert_scripts files="../admin/js/jquery.listtable.js"}

product_sn_list.htm页面引入 jquery-1.11.1.min.js

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\templates\product_sn_list.htm

jquery.listtable.js下载地址

链接：https://pan.baidu.com/s/1CYXvzW4WFRkygkx8q5x48w 提取码：vlrx

{include file="pageheader_list.htm"}

{insert_scripts files="../js/utils.js}

<!--  这里指的是引入的根目录下的/js/test.js -->

{insert_scripts files="../admin/js/validator.js,jquery-1.11.1.min.js"}

<link href="../../js/select2/select2.css" rel="stylesheet" />

<script src="../../js/select2/select2.js"></script>

<form action="javascript:searchproduct();" name="addForm"  id="addForm">

        <!-- 分类 -->

        选择城市

        <select name="city" id="city" onchange="get_city();">

                <option value="-1">所在城市</option>

                {html_options options=$goods_city}

        </select>

        <select name="sn_gid" id="sn_gid" onchange="get_products();" style="width:135px;">

        <option value="0">请选择商品</option>

        {foreach from=$goods_list item=goods}

        <option value="{$goods.goods_id}">{$goods.goods_sn}  {$goods.goods_name}</option>

        {/foreach}

        </select>

        <!-- 商品:<input type="text" name="sn_name" value="" size="12" /> -->

        <select name="sn_pid" id="sn_pid">

        <option value="0">请选择规格</option>

        {foreach from=$products item=product}

        <option value="{$product.product_id}">{$product.product_name}</option>

        {/foreach}

        </select>

        <select name="sn_pizi" id="sn_pizi">

        <option value="0">请选择坯子</option>

        {foreach from=$pizi_list item=pizi}

        <option value="{$pizi.title}">{$pizi.title}</option>

        {/foreach}

        </select>

        <!-- sn_type --><input type="hidden" name="sn_type" id="sn_type" value="1" size="15" />

        <!-- 半成品品号 --><input type="hidden" name="semi_sn" value="" size="5" />

        <!-- 半成品品名 --><input type="hidden" name="sn_name" value="" size="5" />

        成品品号<input type="text" name="sn_sn" value="" size="15" />

        <!-- 新货品 --><input type="hidden" name="sn_newsn" value="" size="5" />

        货品价格<input type="text" name="sn_price" value="" size="5" />

        <input type="button" value="添加成品" class="button" onclick="add_sn();" />

        <input type="submit" value="搜索" class="button"/>

        </form>

<script type="text/javascript">

function searchproduct()

{

    //拿到表单里需要的值

	listTable.filter.gid = document.forms['addForm'].elements['sn_gid'].value;

	listTable.filter.pizi = document.forms['addForm'].elements['sn_pizi'].value;

	listTable.filter.sn = document.forms['addForm'].elements['sn_sn'].value;

	listTable.filter.newsn = document.forms['addForm'].elements['sn_newsn'].value;

	listTable.filter.sn_price = document.forms['addForm'].elements['sn_price'].value;

	listTable.filter.sn_name = document.forms['addForm'].elements['sn_name'].value;

	listTable.filter.goods_city = document.forms['addForm'].elements['city'].value;

	listTable.loadList(); //调用jquery.listtable.js里的listTable.loadList()方法发送ajax

}

//在ajax的成功里改写listTable.listCallback

listTable.listCallback = function(result, txt)

{

    if (result.error > 0)

    {

      alert(result.message);

    }

    else

    {

        try

          {

            document.getElementById('listDiv').innerHTML = result.content;

            if (typeof result.filter == "object")

            {

              listTable.filter = result.filter;

            }

            listTable.pageCount = result.page_count;

            $(".add_semi_sn_relate").select2();

          }

          catch (e)

          {

            alert(e.message);

          }

    }

}

</script>

jquery.listtable.js里

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\js\jquery.listtable.js

/**

 * 载入列表

 */

listTable.loadList = function()

{

  var args = "act="+this.query+"" + this.compileFilter();

  $.ajax({

		   type:"POST",

		   url:listTable.url,

		   data:args ,

		   dataType:"json",

		   success:this.listCallback

 });

}