地服系统列表：表格列表点击实现看图效果

2017-06-05 17:28:16 访问(1598) 赞(0) 踩(0)

关键代码：
1、css定义

2、控制器中设置点击按钮

3、JS实现点击效果

4、ImageInfoItemContainerLoad4VZC - 控制器加载图片信息
// Website\Management\Classes\ZNBM\ZnbmCommonController.cs

#region 加载车辆资产图片

/// <summary>
/// 加载内容
/// </summary>
/// <param name="xdbHelper"></param>
/// <returns></returns>
protected ImageInfoItemContainer
ImageInfoItemContainerLoad4VZCOper(DBHelper xdbHelper)

{
//";
// 逻辑方法 //
eKing.SzdfPage.Helpers.eKingSzdfPageHelper
wh
=
eKing.SzdfPage.Helpers.eKingSzdfPageHelper.ekInstance;

ImageInfoItemContainer theResult
=
new ImageInfoItemContainer();

// 通过http获得参数 //
HttpContextName hcn = HttpContextName.instance;

// 获得关键字 //
string strId = Request.Form[hcn._id];

if (strId == null || strId.Length == 0)
{
theResult.IsSucc = false;
theResult.Msg = "没有获得关键字";

return theResult;
}

bool bIsCreate = true;

if (xdbHelper == null)
{
xdbHelper
=
SlowX.DAL.Helpers.DBHelper.CreateDBHelper();
}
else
{
// 没有打开链接 //
bIsCreate = xdbHelper.IsNotOpen();
}

try
{
if (bIsCreate)
xdbHelper.OpenDBHelper();

List<eKing.SzdfLib.Model.WD.UTB_SZDF_WD_ITEM>
wdList
=
wh.WdLinkModelList4DataId(strId, eKing.SzdfLib.Enums.LinkTable.EmLinkTable.UTB_SZDF_VZC_ITEM__IMG, xdbHelper);

if(wdList!=null)
{
bool isLocal = Request.IsLocal;
string imgUrl = null;

foreach(eKing.SzdfLib.Model.WD.UTB_SZDF_WD_ITEM
model in wdList)
{

imgUrl = wh.ConvertToLinkUrl(model.FileUrl, isLocal);

theResult.AddItem(model.TheName, imgUrl);
}
}

theResult.IsSucc = true;

if (bIsCreate)
xdbHelper.EndDBHelper();

}
catch (Exception err)
{
if (bIsCreate)
xdbHelper.TranDBHelper();

// throw err;
theResult.IsSucc = false;
theResult.Msg = err.Message;
}
finally
{
if (bIsCreate)
xdbHelper.FinallyDBHelper();
}

return theResult;
}

/// <summary>
/// 加载 - 车辆资产的图片信息
/// </summary>
/// <returns></returns>
public ActionResult ImageInfoItemContainerLoad4VZC()
{

ImageInfoItemContainer opResult = null;

try
{
opResult
=
ImageInfoItemContainerLoad4VZCOper(null);
}
catch (Exception err)
{
opResult = new ImageInfoItemContainer();
opResult.IsSucc = false;
opResult.Msg = err.Message;
}

ContentResult theResult = new ContentResult();
theResult.ContentEncoding = UTF8Encoding.UTF8;
// 返回Json格式 //
theResult.ContentType = MIMETypes.Json;

theResult.Content = opResult.ToJson();

return theResult;
}

#endregion

       


 // 浮层看图效果 //
        var imageShowList = null;
        var imageIndex = 0;

        // 查看车辆的图片信息 //
        function JsOnViewZcImage(zcId)
        {
            imageShowList = null;
            imageIndex = 0;

            // 加载图片 //
            var ajaxUrl = "ImageInfoItemContainerLoad4VZC";

            // 获得搜索的数据 //
            var ajxData = [];

            ajxData.push({ name: "_id", value: zcId });

            $.ajax({
                cache: false,
                async: true,
                url: ajaxUrl,
                type: "post",
                data: ajxData,
                success: function (rData) {
                    if (rData == null)
                        return;

                    if(!rData.IsSucc)
                    {
                        return;
                    }

                    imageShowList = rData.ItemList;

                    if(imageShowList==null||imageShowList ==undefined)
                        return;

                    var iLen = imageShowList.length;

                    if(iLen == 0)
                        return;

                    if(iLen == 1)
                    {
                        $("#div_ImageShowButtons").hide();
                    }
                    else
                    {
                        $("#div_ImageShowButtons").show();
                    }

                    $("#div_ImgShowCenter").delay(10).fadeIn(600);

                    imageIndex = 0;
                    $("#img_ViewShow").attr("src",imageShowList[0].ImgUrl);
                }
            });
        }


        $(function () {
            // DIV显示图层的点击消失 //
            $("#div_ImgShowCenter").on("click", function () {
                if (this.id != "img_ViewShow") {
                    $("#div_ImgShowCenter").delay(10).fadeOut(300);
                }
            });

            // 控制冒泡 //
            $("#img_ViewShow").on("click", function (e) {
                e.stopPropagation();
            });

            $("#imgbtn_ImageViewNext").on("click", function (e) {
                e.stopPropagation();
            });

            $("#imgbtn_ImageViewPre").on("click", function (e) {
                e.stopPropagation();
            });



            //更换图片 -- 上/下一张//
            $('[data-role="ImageViewChangeImg"]').on("click", function (e) {

                if(imageShowList == null)
                    return;

                var iLen = imageShowList.length;

                if(iLen < 2)
                    return;

                if ( this.id == "imgbtn_ImageViewPre")
                {
                    if(imageIndex < 1){
                        imageIndex = iLen-1;
                    }
                    else
                    {
                        imageIndex = imageIndex-1;
                    }
                }

                if ( this.id == "imgbtn_ImageViewNext") {

                    imageIndex = imageIndex + 1;

                    if(imageIndex >= iLen){
                        imageIndex = 0;
                    }
                }

                var imageUrl = imageShowList[imageIndex].ImgUrl;

                //$("#img_ViewShow").delay(10).fadeOut(300);
                $("#img_ViewShow").attr("src", imageUrl);
                //$("#img_ViewShow").delay(10).fadeIn(300);

            });
        })

        // 浮层看图效果END //

                    if(imgCount>0)
                    {
                        vehImg
                            = "<span title=\"点击查看车辆图片\" style=\"cursor:pointer;\" onclick=\"JsOnViewZcImage(" + model.ID.ToString() + ");\">"
                            + "<img src=\"" + strPhyPath + "/Content/icon/image.png\" alt=\"\" />"
                            + "</span>"
                            + "&nbsp;";
                    }

                    tci.PreFillText = vehImg;

// Management\Areas\ZnbmZc\Controllers\VZC\VzcItem\VzcItemController_Page.cs

#region TableListOperAfterDB - 列表绑定-查询操作后的逻辑，主要用于实现重新设置表格的内容（需要重载实现）

/// <summary>
/// 列表绑定-查询操作后的逻辑，主要用于实现重新设置表格的内容（需要重载实现）
/// </summary>
/// <param name="bllMain">业务操作逻辑</param>
/// <param name="entityMain">数据表查询逻辑条件</param>
/// <param name="hai">地址参数</param>
/// <param name="ds">数据源</param>
/// <param name="pgc">数据结果集</param>
/// <param name="tcbConfig">相关配置</param>
/// <param name="xdbHelper">数据库链接串</param>
public override void TableListOperAfterDB
(
BaseBusiness bllMain,
BaseEntity entityMain,
HttpActionInfo hai,
DataSet ds,
BootstrapTableDataContainer pgc,
TableCellItemBuildConfig tcbConfig,
DBHelper xdbHelper
)
{
base.TableListOperAfterDB
(
bllMain,
entityMain,
hai,
ds,
pgc,
tcbConfig,
xdbHelper
);

// 获得二维要显示结果的表格 //
List<List<TableCellItem>> dataList = pgc.DataList;

if (dataList == null)
return;

// 业务逻辑的方法 //
eKing.SzdfPage.Helpers.eKingSzdfPageHelper
wh
=
eKing.SzdfPage.Helpers.eKingSzdfPageHelper.ekInstance;

// 获得页面的属性 //
eKing.SzdfPage.Areas.ZnbmZc.VZC.VzcItem.EkSzdfPage eKp
=
eKing.SzdfPage.Areas.ZnbmZc.VZC.VzcItem.EkSzdfPage.instance;

// 获得页面的属性 //
eKing.SzdfPage.Areas.ZnbmZc.VZC.VzcItem.EkSzdfTable eKt
=
eKp.MainTable;

int iCount = dataList.Count;

DataTable dt = ds.Tables[0];

eKing.SzdfLib.Model.VZC.UTB_SZDF_VZC_ITEM
model = null;

List<TableCellItem> sList = null;
TableCellItem tci = null;

VzcItemModelContainer BMC = new VzcItemModelContainer();
int fileCount = 0;
int imgCount = 0;
int totalFileCount = 0;

int idx = -1;
eKing.SzdfLib.Enums.LinkTable.EmLinkTable
emLTF =
eKing.SzdfLib.Enums.LinkTable.EmLinkTable.UTB_SZDF_VZC_ITEM;

eKing.SzdfLib.Enums.LinkTable.EmLinkTable
emLTI =
eKing.SzdfLib.Enums.LinkTable.EmLinkTable.UTB_SZDF_VZC_ITEM__IMG;

ShowModelContainer
SMC
=
new ShowModelContainer();

// 判断车辆图片 //
string vehImg = null;

// 比较时间 //
DateTime dtNow = DateTime.Now;

// 使用月份 //
int usedMonth = 0;

for (int i = 0; i < iCount; ++i)
{
vehImg = "";
sList = dataList[i];

model = new eKing.SzdfLib.Model.VZC.UTB_SZDF_VZC_ITEM
(
dt.Rows[i],
false,
xdbHelper
);

idx = eKt._EmCurrStatusV.TableIndex;

if (idx != -1)
{
tci = sList[idx];
tci.ForeColor = model.EmCurrStatusVGetColor();
}

// 文件个数 //
fileCount = wh.WdLinkCount4DataId
(
model.ID.ToString(),
emLTF,
xdbHelper
);

// 图片个数 //
imgCount = wh.WdLinkCount4DataId
(
model.ID.ToString(),
emLTI,
xdbHelper
);

idx = eKt.__WD.TableIndex;

if (idx != -1)
{
tci = sList[idx];
tci.EmTableCellFillCtrlV = eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.AHref;
tci.HrefUrl = "FileUpload?id=" + model.ID.ToString();
tci.EmHrefTargetV = eKing.EkPageCreate.Enums.HrefTarget.EmHrefTarget.无;

totalFileCount = fileCount + imgCount;

if (totalFileCount == 0)
{
tci.TheText = "附件";
}
else
{
tci.TheText = "附件(" + totalFileCount.ToString() + ")";
tci.ForeColor = System.Drawing.Color.Blue;

if (fileCount == 0)
{
tci.HrefUrl = "ImageFileUpload?id=" + model.ID.ToString();
}
}
}

idx = eKt._YTJYF.TableIndex;

if(idx!=-1)
{
tci = sList[idx];

usedMonth = wh.GetMonthNumberByDateTime
(
model.StartDate,
dtNow
);

if (usedMonth >= 120)
{
tci.ForeColor
=
System.Drawing.Color.Red;
}

tci.TheText =
wh.UsedMonthToString(usedMonth);

tci.EmTableCellFillCtrlV
=
eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.Span;
tci.CtrlTitle
=
wh.VzcItemGetToolTip4DateTime(usedMonth,model, xdbHelper);
}

idx = eKt._UseDep_Id.TableIndex;

if(idx!=-1)
{
// 使用部门 //
tci = sList[idx];
tci.EmTableCellFillCtrlV
=
eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.Span;

tci.EmTableCellFillCtrlV
=
eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.Span;

tci.CtrlTitle = wh.VzcItemGetToolTip4ZRR(SMC, model, xdbHelper);
}

idx = eKt._RepairDate.TableIndex;
if(idx!=-1)
{
tci = sList[idx];

if (model.RepairDate != null && model.RepairDate.Value <= dtNow)
{
tci.ForeColor
=
System.Drawing.Color.FromArgb(153, 0, 0);

tci.CtrlTitle = "已经过了保修期";
}
}

//idx = eKt._TheName.TableIndex;

//if (idx != -1)
//{
// tci = sList[idx];

// tci.EmTableCellFillCtrlV
// =
// eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.AHref;

// tci.EmCtrlCursorV
// =
// eKing.EkPageCreate.Enums.CtrlCursor.EmCtrlCursor.手势;
// tci.TheText = model.ToShowName();
// tci.HrefUrl = "ViewItem?id=" + model.ID;
// tci.EmHrefTargetV = eKing.EkPageCreate.Enums.HrefTarget.EmHrefTarget.无;

// tci.CtrlTitle
// =
// wh.VzcItemGetToolTip
// (
// eKing.SzdfLib.Enums.ToolTipShow.EmToolTipShow.完整,
// model,
// BMC,
// xdbHelper
// );
//}

idx = eKt._TheName.TableIndex;

if (idx != -1)
{
tci = sList[idx];

// 用AHref，ToolTip的浮层显示效果不好 //
tci.EmTableCellFillCtrlV
=
eKing.EkPageCreate.Enums.TableCellFillCtrl.EmTableCellFillCtrl.Span;

// < span class="c_blue p_r5" style="cursor:pointer;" onclick="('ViewItem?isedit=0&id=14')">的范德萨发</span>
tci.CtrlCssClass = "c_blue p_r5";
tci.JsOnClick = "EkGoPage('ViewItem?id=" + model.ID.ToString() + "')";
tci.EmCtrlCursorV
=
eKing.EkPageCreate.Enums.CtrlCursor.EmCtrlCursor.手势;

tci.TheText = model.ToShowName();

if(imgCount>0)
{
vehImg
= "<span title=\"点击查看车辆图片\" style=\"cursor:pointer;\" onclick=\"JsOnViewZcImage(" + model.ID.ToString() + ");\">"
+ "<img src=\"" + strPhyPath + "/Content/icon/image.png\" alt=\"\" />"
+ "</span>"
+ " ";
}

tci.PreFillText = vehImg;

//tci.HrefUrl = "ViewItem?id=" + model.ID;
//tci.EmHrefTargetV = eKing.EkPageCreate.Enums.HrefTarget.EmHrefTarget.无;

//tci.CtrlTitle
// =
// wh.VzcItemGetToolTip
// (
// eKing.SzdfLib.Enums.ToolTipShow.EmToolTipShow.完整,
// model,
// BMC,
// xdbHelper
// );
}
}
}

#endregion TableListOperAfterDB - 列表绑定-查询操作后的逻辑，主要用于实现重新设置表格的内容（需要重载实现）

/* 切换图片显示 */
.imgViewShow {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    margin-top: 50px;
    z-index: 999;
    border: 4px solid #fff;
}

.bg_cover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.ImgShowCenterMainDiv {
    text-align: center;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
}

.imgbtn_ImageViewPre {
    margin-top: 30px;
    cursor:pointer;
}

.imgbtn_ImageViewNext {
    margin-top: 30px;
    cursor:pointer;
    margin-left: 33.33%;
}

.DivViewShow {
    width: 100%;
    height: inherit;
    text-align: center;
    margin: auto;
}
/* 切换图片显示END */

上一条：

下一条：

发表评论

类型：

留言

建议

疑问

内容：

(Alt+Enter)

┈全部┈

SlowX框架的升级
新LBS开发
数据库编码规范
.net编码规范
代码风格
知识
- boolstrap
- GMap.NET
- ArcGis
- LigerUI
- C#
  - 代码生成工具常用代码
- MapInfo
- WinForm
- 百度地图
- 片段代码
- .net逻辑代码
- HTML和JS
- 数据库
- FineUI
- MFC
- 插件Addin
- 待整理
- 数据库教程
- Asp.net
- 文章
- ASP
巫霜
- 定制平台
  - ZX
    - Classes
    - Helpers
  - ZXPageCore
    - Enums
    - Helpers
    - Configs
- 开发系统
  - 控件
  - 应用
  - JS
  - 其他
- SlowX.Core
- 经验交流
- 命名规则
  - .net程序
  - 数据库
- 我的片段代码
- WebSiteBasicBLL
特效
组件
临时
- 实验题

（显示全部分类）

地服系统列表：表格列表点击实现看图效果

相关评论

发表评论