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
思路
- 预加载select2的js样式
- onchange获取select框里的数据后发送ajax
- 控制器处理好后返回结果.
- 如果是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
});
}
[Haima的博客]
http://www.cnblogs.com/haima/
