定区关联客户的JavaScript(基于easyui)
①下拉框option数据的添加
注:如果使用了第二种我们就不用再转json了。。
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
注:struts有默认封装的,集合数据返json的时候,没有数据回返回 [ null ] 所以一定要进行有效性认证。
function doAssociations(){
var rows=$("#grid").datagrid("getSelections");
if(rows.length != 1){
$.messager.alert('Warning','一次只可以关联一个定区!');
}else{
$('#noassociationSelect').empty();
$('#associationSelect').empty();
$('#customerWindow').window('open');
var url1="${pageContext.request.contextPath}/decidedzoneAction_findNoassociation.action";
$.post(url1,function(data){
if(data[0]!=null){
for(var i=0;i<data.length;i++){
var id = data[i].id;
var name = data[i].name;
var telephone = data[i].telephone;
name = name + "(" + telephone + ")";
$('#noassociationSelect').append("<option value="+id+">"+name+"</option>");
}
}
});
var url2="${pageContext.request.contextPath}/decidedzoneAction_findAssociation.action";
$.post(url2,{"id":rows[0].id},function(data){
if(data[0]!=null){
for(var i=0;i<data.length;i++){
var id = data[i].id;
var name = data[i].name;
var telephone = data[i].telephone;
name = name + "(" + telephone + ")";
$('#associationSelect').append("<option value="+id+">"+name+"</option>");
}
}
});
}
}
②option数据的平移
$("#toRight").bind("click",function(){
$("#associationSelect").append($("#noassociationSelect option:selected"));
});
$("#toLeft").bind("click",function(){
$("#noassociationSelect").append($("#associationSelect option:selected"));
});
③为窗口添加点击事件
注:这里其实我们只需要关注关联客户客户即可。
$("#associationBtn").bind("click",function(){
var rows=$("#grid").datagrid("getSelections");
为隐藏于进行赋值
$("input[name=id]").val(rows[0].id);
$("#associationSelect option").attr("selected","selected");
$("#customerForm").submit();
});
④查询赋值
$("input[name='telephone']").bind("blur",function(){
var telephone=this.value;
var url="${pageContext.request.contextPath}/noticebillAction_findCustomerByTelephone.action";
$.post(url,{"telephone":telephone},function(data){
if(data!=null){
$("input[name='customerId']").val(data.decidedzoneId);
$("input[name='customerName']").val(data.name);
$("input[name='delegater']").val(data.name);
$("input[name='pickaddress']").val(data.address);
}else{
$("input[name='customerId']").val(data.decidedzoneId);
$("input[name='customerName']").val(data.name);
$("input[name='delegater']").val(data.name);
$("input[name='pickaddress']").val(data.address);
}
});
});
⑤为表格动态的添加内容
<tr>
<td>选择角色:</td>
<td colspan="3" id="roleTD">
<script type="text/javascript">
$(function(){
//页面加载完成后,发送ajax请求,获取所有的角色数据
$.post('${pageContext.request.contextPath }/roleAction_listajax.action',function(data){
//在ajax回调函数中,解析json数据,展示为checkbox
for(var i=0;i<data.length;i++){
var id = data[i].id;
var name = data[i].name;
$("#roleTD").append('<input id="'+id+'" type="checkbox" name="roleIds" value="'+id+'"><label for="'+id+'">'+name+'</label>');
}
});
});
</script>
</td>
</tr>