前台界面

标签：

<fieldset>
<legend>查询</legend>
<table style="width: 100%;">
<tr>
<td class="tb1">区域：</td>
<td class="td2">
<input id="quyu" name="quyu" class="easyui-combobox" /></td>
<td class="tb1">行业：</td>
<td class="td2">
<input id="hangye" name="hangye" class="easyui-combobox" /></td>
<td class="tb1">客户名称：</td>
<td class="td2" colspan="2">
<input id="kehuming" name="kehumingcheng" class="easyui-textbox" style="width:300px;" /></td>
<td class="tb1" style="text-align:right;"><a id="btnchaxun" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">查询</a> </td>
</tr>
</table>
<div class="easyui-panel" title="高级搜索条件"
style="width: 100%; background: #fafafa;"
data-options="collapsible:true,collapsed:true">
<table style="width: 100%; padding-left: 5px;">
<tr>
<td class="tb1">省：</td>
<td class="td2">
<input id="sheng" class="easyui-combobox" ></td>
<td class="tb1">市：</td>
<td class="td2">
<input id="shi" name="shi" class="easyui-combobox" /></td>
<td class="tb1">产品属性：</td>
<td class="td2">
<input id="chanpinshuxing" name="chanpinshuxing" class="easyui-combobox" /></td>
<td class="tb1">物流模式：</td>
<td class="td2">
<input id="wuliumoshi" name="wuliumoshi" class="easyui-combobox" /></td>
<td></td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 50px;"></td>
<td class="checkbox" style="display:none;">
<input type="checkbox" name="name" value="" />TOP客户</td>
<td class="checkbox">
<input type="checkbox" name="name" value="" id="CrmClient_IsTradeTop" />行业TOP</td>
<td class="checkbox">
<input type="checkbox" name="name" value="" id="CrmClient_IsCompanyTop" />公司TOP</td>
<td class="checkbox">
<input type="checkbox" name="name" value="" id="CrmClient_IsAreaTop"/>片区TOP</td>
<td class="checkbox">
<input type="checkbox" name="name" value="" id="CrmClient_IsProvinceTop"/>省级TOP</td>
<td>
<input type="checkbox" name="name" value="" id="CrmClient_IsTargetCustomer"/>目标客户</td>
</tr>
</table>
</div>
</fieldset>

<div style="height: 5px;"></div>
<table id="gridchaxunjieguo" class="easyui-datagrid" data-options="title:‘查询结果‘,rownumbers:true,pagination:true,fitColumns:true,singleSelect:true" style="width: 100%; height: 345px;">
<thead>
<tr>
<th data-options="field:‘ck‘,checkbox:true,hidden:true"></th>
<th data-options="field:‘CrmClient_IsMatched‘,width:40,align:‘center‘">匹配</th>
<th data-options="field:‘CrmClient_IsTargetCustomer‘,width:40,align:‘center‘">目标</th>
<th data-options="field:‘CrmClient_Name‘,width:220,align:‘center‘">公司</th>
<th data-options="field:‘CrmArea_Name‘,width:120,align:‘center‘">区域</th>
<th data-options="field:‘CrmTrade_Name‘,width:120,align:‘center‘">行业</th>
<th data-options="field:‘province‘,width:80,align:‘center‘">省</th>
<th data-options="field:‘city‘,width:80,align:‘center‘">市</th>
<th data-options="field:‘CrmClient_CreaterName‘,width:100,align:‘center‘">创建人</th>
<th data-options="field:‘CrmClient_CluesTime‘,align:‘center‘">线索获取时间</th>
<th data-options="field:‘CrmClient_CreatedDateTime‘,align:‘center‘">数据录入时间</th>
</tr>
</thead>
</table>
<table style="width: 100%;display:none;" id="createButtonPanel">
<tr>
<td></td>
<td style="width: 60px; text-align: right"><a id="btnAdd" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘">创建</a> </td>
<td style="width: 70px; padding-left: 25px; display:none;"><a id="btnCancel" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘">取消</a> </td>
</tr>
</table>

<!-- 修改界面 -->
<div id="dialog" class="easyui-dialog" title="修改客户线索" data-options="closed:true" style="padding:5px; top:5px;left:5px;">
<iframe id="changPage" src="" width="99%" height="99%" style="border:none;"></iframe>
</div>

<!-- 全局变量 -->
<script>
window["clientData"] = null;
</script>

<!-- 页面启动函数 -->
<script>
$(document).ready(function () {
//开启遮照
parent.showMask();

//根据 url 显示创建按钮，重新设置高度
initPageModel();

//绑定修改事件
initEditTrigger();

//初始化，客户名称智能搜索
initClientNameFuzzyQuery();

//行业
$.ajax({
url: "/Handler/GetTradeTypeHandler.ashx", //请求的url地址
dataType: "json", //返回格式为json
type: "post", //请求方式
success: function (req) {
//请求成功时处理
//去除遮照
var resultToParse = req["data"];
resultToParse.unshift({"CrmTrade_ID":"","CrmTrade_Name":"请选择"});
jQuery("#hangye").combobox({
valueField: ‘CrmTrade_ID‘,
textField: ‘CrmTrade_Name‘
}).combobox("loadData", resultToParse);
var data = $(‘#hangye‘).combobox(‘getData‘);//默认选中第一条
$("#hangye").combobox(‘select‘, data[0]["CrmTrade_ID"]);
},
error: function (a, b, c) {
//请求出错处理
//去除遮照
console.log(a);
}
});

//产品属性
$.ajax({
url: "/Handler/GetProductTypeHandler.ashx", //请求的url地址
dataType: "json", //返回格式为json
type: "post", //请求方式
success: function (req) {
//请求成功时处理
//去除遮照
var resultToParse = req["data"];
resultToParse.unshift({"CrmProductType_ID":"","CrmProductType_Name":"请选择"});
jQuery("#chanpinshuxing").combobox({
valueField: ‘CrmProductType_ID‘,
textField: ‘CrmProductType_Name‘
}).combobox("loadData", resultToParse);

var data = $(‘#chanpinshuxing‘).combobox(‘getData‘);//默认选中第一条
$("#chanpinshuxing").combobox(‘select‘, data[0]["CrmProductType_ID"]);
},
error: function (a, b, c) {
//请求出错处理
//去除遮照
console.log(a);

}
});
//物流模式
$.ajax({
url: "/Handler/GetLogisticsModelHandler.ashx", //请求的url地址
dataType: "json", //返回格式为json
type: "post", //请求方式
success: function (req) {
//请求成功时处理
//去除遮照
var resultToParse = req["data"];
resultToParse.unshift({"CrmLogisticsModel_ID":"","CrmLogisticsModel_Name":"请选择"});
jQuery("#wuliumoshi").combobox({
valueField: ‘CrmLogisticsModel_ID‘,
textField: ‘CrmLogisticsModel_Name‘
}).combobox("loadData", resultToParse);

var data = $(‘#wuliumoshi‘).combobox(‘getData‘);//默认选中第一条
$("#wuliumoshi").combobox(‘select‘, data[0]["CrmLogisticsModel_ID"]);

},
error: function (a, b, c) {
//请求出错处理
//去除遮照
console.log(a);
}
});

//获取省
$.ajax({
url: "/Handler/GetAddressHandler.ashx", //请求的url地址
dataType: "json", //返回格式为json
type: "post", //请求方式
success: function (req) {
//请求成功时处理
//去除遮照
var resultToParse = req["data"]["province"];
resultToParse.unshift({"CityCode":"","CityName":"请选择"});

jQuery("#sheng").combobox({
valueField: ‘CityCode‘,
textField: ‘CityName‘
}).combobox("loadData", resultToParse).combobox(‘select‘, ‘‘);

//绑定级联事件（省市）
$("#sheng").combobox({
"onSelect": function (record) {
var provinceCode = record["CityCode"];
//级联调整市级菜单
shijiTrigger(req["data"]["city"], provinceCode);
}
});
//初始化市
initCityCombox(req);

},
error: function (a, b, c) {
//请求出错处理
//去除遮照
console.log(a);
}
});

//初始化，绑定搜索按钮事件
jQuery("#btnchaxun").click(function () {
var searchCondition = getSearchCondition();
refreshClientList(searchCondition);
});

//初始化，绑定grid分页事件
$("#gridchaxunjieguo").datagrid("getPager").pagination({
onBeforeRefresh:function(){
//alert(‘before refresh‘);
},
onRefresh:function(pageNumber,pageSize){
//alert(pageNumber);
//alert(pageSize);
},
onChangePageSize:function(){
//alert(‘pagesize changed‘);
},
onSelectPage:function(pageNumber,pageSize){
//alert(pageNumber);
//alert(pageSize);
var searchCondition = getSearchCondition(pageNumber,pageSize);
refreshClientList(searchCondition);
}
});

//区域
$.ajax({
url: "/Handler/GetAreasHandler.ashx", //请求的url地址

dataType: "json", //返回格式为json
type: "post", //请求方式
success: function (req) {
//请求成功时处理
//去除遮照
var resultToParse = req["data"];
resultToParse.unshift({ "CrmArea_ID": "", "CrmArea_Name": "请选择" });
jQuery("#quyu").combobox({
valueField: ‘CrmArea_ID‘,
textField: ‘CrmArea_Name‘
}).combobox("loadData", resultToParse);
var data = $(‘#quyu‘).combobox(‘getData‘);//默认选中第一条
$("#quyu").combobox(‘select‘, data[0]["CrmArea_ID"]);
parent.hideMask();
},
error: function (a, b, c) {
//请求出错处理
//去除遮照
console.log(a);
parent.hideMask();
}
});
doubleTrigger();//datagrid双击双击事件
});

</script>
<!--datagrid双击事件-->
<script>
function doubleTrigger() {
$("#gridchaxunjieguo").datagrid({
onDblClickRow: function (rowIndex, rowData) {
window["clientData"] = rowData;
jQuery("#changPage").attr("src", "/UI/CustomerInformation/CustomerInformationHandUpdate.aspx?t=read");

//显示编辑界面
$("#dialog").dialog({
width: $("#content", parent.document).width() - 10,
height: $("#content", parent.document).height() - 10,
}).dialog("open");
//$("#changPage").css({background:"#ffffff",position:"absolute",filter:"alpha(opacity=30)",opacity:0.5,width:"100%",height:"100%"});
//jQuery(‘iframe‘).showLoading({ ‘addclass‘: ‘background:"#ffffff",position:"absolute",z-index:2,filter:"alpha(opacity=30)",opacity:0.5,width:"100%",height:"100%"‘ });
}
});
}
</script>
<!-- 初始化市combox -->
<script>
function initCityCombox(provinceAndCityData) {

//请求成功时处理
//去除遮照
var resultToParse = provinceAndCityData["data"]["city"];

//看懂就行 start
var jsonData = [];
var cityArray = resultToParse[0];
for (var key in cityArray) {
for (var key2 in cityArray[key][0]) {
var tempJsonItme = { "CityCode": key2, "CityName": cityArray[key][0][key2] };
jsonData.push(tempJsonItme);
}
}
//看懂就行 end

jsonData.unshift({"CityCode":"","CityName":"请选择"});

jQuery("#shi").combobox({
valueField: ‘CityCode‘,
textField: ‘CityName‘
}).combobox("loadData", jsonData).combobox(‘select‘, ‘‘);

}
</script>

<!-- 级联调整市级菜单 -->
<script>
function shijiTrigger(resultToParse, provinceCode) {
if(provinceCode == ‘‘)
{
jQuery("#shi").combobox({valueField: ‘CityCode‘,textField: ‘CityName‘}).combobox("loadData", [{"CityCode":"","CityName":"请选择"}]).combobox(‘select‘, ‘‘);
}

for (var i = 0; i < resultToParse.length; i++) {
for (var Pkey in resultToParse[i]) {
if (Pkey == provinceCode) {
var cityArray = resultToParse[i][Pkey];
var jsonData = [];
for (var key in cityArray) {
for (var key2 in cityArray[key]) {
var tempJsonItme = { "CityCode": key2, "CityName": cityArray[key][key2] };
jsonData.push(tempJsonItme);
}
}
jsonData.unshift({"CityCode":"","CityName":"请选择"});

jQuery("#shi").combobox({
valueField: ‘CityCode‘,
textField: ‘CityName‘
}).combobox("loadData", jsonData).combobox(‘select‘, ‘‘);
}
}
}

}
</script>

<!-- 搜索客户信息 -->
<script>
function refreshClientList(searchCondition)
{
//开启遮照
parent.showMask();
$.ajax({
type: "post",
url: "/Handler/SearchClientHandler.ashx",
dataType: "json",
data: {
"searchCondition":searchCondition
},
success: function (data) {
if (data[0]["result"] == "1") {
var dataArrayToAdd=data[0]["data"];

//格式化数据
for(var i=0;i<dataArrayToAdd.length;i++)
{
if(dataArrayToAdd[i]["CrmClient_IsMatched"]=="1")
{
dataArrayToAdd[i]["CrmClient_IsMatched"]="<img src=\"\\Images\\hook.png\" />";
}
else
{
dataArrayToAdd[i]["CrmClient_IsMatched"]=‘‘;
}
if(dataArrayToAdd[i]["CrmClient_IsTargetCustomer"]=="1")
{
dataArrayToAdd[i]["CrmClient_IsTargetCustomer"]="<img src=\"\\Images\\hook.png\" />";
}
else
{
dataArrayToAdd[i]["CrmClient_IsTargetCustomer"]=‘‘;
}
}

var totalRowCount =data[0]["total"];
var json={"total":totalRowCount,"rows":dataArrayToAdd};
$("#gridchaxunjieguo").datagrid("loadData",json);
parent.hideMask();
}
else
{
$(‘#gridchaxunjieguo‘).datagrid(‘loadData‘, { total: 0, rows: [] });
$("#gridchaxunjieguo").datagrid(‘getPager‘).data("pagination").options.pageNumber=1;
parent.hideMask();
}
}
});
}
</script>

<!-- 获取搜索条件数据 -->
<script>
function getSearchCondition(pageIndex,pageSize)
{
var result = {};
result["CrmClient_Name"] = $("#kehuming").combo("getText");
result["CrmArea_ID"]=$("#quyu").combobox(‘getValue‘);
result["CrmTrade_ID"]=$("#hangye").combobox(‘getValue‘);
result["CrmClient_ProvinceID"]=$("#sheng").combobox(‘getValue‘);
result["CrmClient_CityID"]=$("#shi").combobox(‘getValue‘);
result["CrmClient_ProductAttributesID"]=$("#chanpinshuxing").combobox(‘getValue‘);
result["CrmClient_LogisticsModeID"]=$("#wuliumoshi").combobox(‘getValue‘);
result["CrmClient_IsTradeTop"]=$("#CrmClient_IsTradeTop").get(0).checked==true?1:-1;
result["CrmClient_IsCompanyTop"]=$("#CrmClient_IsCompanyTop").get(0).checked==true?1:-1;
result["CrmClient_IsAreaTop"]=$("#CrmClient_IsAreaTop").get(0).checked==true?1:-1;
result["CrmClient_IsProvinceTop"]=$("#CrmClient_IsProvinceTop").get(0).checked==true?1:-1;
result["CrmClient_IsTargetCustomer"]=$("#CrmClient_IsTargetCustomer").get(0).checked==true?1:-1;
result["pageIndex"]=$("#gridchaxunjieguo").datagrid(‘getPager‘).data("pagination").options.pageNumber;
result["pageSize"]=$("#gridchaxunjieguo").datagrid(‘getPager‘).data("pagination").options.pageSize;
//alert(result["pageIndex"]+"^"+result["pageSize"]);
if(pageIndex!=undefined)
{
result["pageIndex"]=pageIndex;
}
if(pageSize!=undefined)
{
result["pageSize"]=pageSize;
}
return result;
}
</script>

<!-- 获取客户名称列表 -->
<script>
function initClientNameFuzzyQuery()
{
$(‘#kehuming‘).combobox({
prompt: ‘智能查询公司名，输入后请空格‘,
required: false,
mode: ‘remote‘,
url: ‘/Handler/GetCompanyName.ashx‘,
editable: true,
valueField: ‘companyName‘,
textField:‘companyName‘,
hasDownArrow: false,
onBeforeLoad: function (param) {
if (param == null || param.q == null || param.q.replace(/ /g, ‘‘) == ‘‘) {
var value = $(this).combobox(‘getValue‘);
if (value) {// 修改的时候才会出现q为空而value不为空
param.id = value;
return true;
}
return false;
}
}
});
}
</script>

<!-- 根据 url 设置界面 -->
<script>
function initPageModel()
{
var fileName = window.location.pathname;

if (fileName == "/UI/CustomerInformation/CustomerInformationSearch.aspx")
{
//客户搜索界面
jQuery("#createButtonPanel").hide();
}
if (fileName == "/UI/CustomerInformation/CustomerInformationUpdate.aspx")
{
//客户修改界面
jQuery("#btnAdd span").find(".l-btn-text").text("修改");
jQuery("#btnAdd span:last").removeClass("icon-add").addClass("icon-edit");
jQuery("#createButtonPanel").show();
}
}
</script>

<!-- 绑定修改事件 -->
<script>
function initEditTrigger()
{
jQuery("#btnAdd").click(function () {
var selectedRow = jQuery("#gridchaxunjieguo").datagrid("getSelected");
if (selectedRow != null) {
window["clientData"] = selectedRow;

jQuery("#changPage").attr("src", "/UI/CustomerInformation/CustomerInformationHandUpdate.aspx");

//显示编辑界面
$("#dialog").dialog({
width: $("#content", parent.document).width() - 10,
height: $("#content", parent.document).height() - 10,
}).dialog("open");
}
else {
//显示提示信息
$.messager.show({
title: ‘提示‘,
msg: ‘请先选择一行数据‘,
timeout: 1500,
showType: ‘slide‘
});
}
});
}
</script>

<!-- 刷新数据 -->
<script>
function getConditionAndRefreshData()
{
var pageopt = $(‘#gridchaxunjieguo‘).datagrid(‘getPager‘).data("pagination").options;
var pageNumber = pageopt.pageNumber;
var pageSize = pageopt.pageSize;
var searchCondition = getSearchCondition(pageNumber, pageSize);
refreshClientList(searchCondition);
}
</script>

<!-- 关闭对话框 -->
<script>
function closeDialog(flag)
{
jQuery("#dialog").dialog(‘close‘);
if (flag == 1)
{
jQuery.messager.show({
title: ‘‘,
msg: ‘修改成功！‘,
timeout: 200,
showType: ‘slide‘
});
}
}
</script>
<!--提示信息-->
<script>
function messageShow(message) {
//显示提示信息
$.messager.show({
title: ‘提示‘,
msg: message,
timeout: 1500,
showType: ‘slide‘
});
}
</script>

前台界面

标签：

原文地址：http://www.cnblogs.com/zhang-wenbin/p/5809809.html