在每个Repeater ItemTemplate中生成条形码

时间:2019-04-30 13:48:05

标签: javascript c# jquery asp.net repeater

我打算在ASP转发器中使用jquery条形码库生成条形码。

中继器工作良好,所有检索的数据都被显示。

问题出在条形码的产生上。

请对此提供帮助。

<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/jquery-barcode.js"></script>
<script type="text/javascript">
    function GetBarcode(_refEnvoi) {
        $("#bcTarget").barcode(_refEnvoi, "code128", { barWidth: 2, 
     barHeight: 50, output: 'css' });
    };

</script>

<form id="form1" runat="server">
<asp:Repeater runat="server" ID="repAllEnvois" ClientIDMode="Static" 
 OnItemDataBound="repAllEnvois_ItemDataBound">
        <ItemTemplate>
 <asp:Label ID="txtrefEnvoi" runat="server" Text='<%# Eval("refEnvoi") %>' 
 />
<div id="bcTarget" runat="server" class="pull-right" style="height: 70px"> 
</div>
</ItemTemplate>
        <SeparatorTemplate>
            <h2 style="page-break-before: always;"></h2>
            <br />
        </SeparatorTemplate>

    </asp:Repeater>

 </form>

隐藏代码

    protected void repAllEnvois_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            RepeaterItem item = e.Item;

            string refBarcode = (item.FindControl("txtrefEnvoi") as Label).Text;

            ClientScript.RegisterClientScriptBlock( this.GetType(), "GetBarcode", "GetBarcode(+'refBarcode'+)", true);l;
        }
    }

1 个答案:

答案 0 :(得分:0)

尝试一下

<img class="barcode" data-id='<%# Eval("refEnvoi") %>' />

您希望条形码出现的内部中继器

然后在botton使用此脚本生成条形码

<script>
$(function(){
    var $barcode = $(".barcode");
    $barcode.each(function () {
        var bc = $(this).data('id').toString();
        $(this).JsBarcode(bc, { "format": "code128", "backgroundColor": "#fff", "fontSize": 16, "height": 40, "width": 1, "displayValue": true }, function (valid) {

        });
    });
});
</script>

需要JSBarcode library