select2插件+ajax笔记

目录

• 手册
• 思路
• 1. 如果是自己写的ajax这样就可以了.
  • html里
  • 控制器里
• 2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支持,ecshop原生的call与JQuery冲突.表格上面的搜索和下面翻页需要改写
  • pageheader_list.htm头页面里引入jquery.listtable.js
  • product_sn_list.htm页面引入jquery-1.11.1.min.js
  • jquery.listtable.js里

---

手册

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
 });

}