在每个 Repeater ItemTemplate 中生成条形码

Generate Barcode in every Repeater ItemTemplate

我计划在 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;
        }
    }

试试这个

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

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

然后在底部使用这个脚本生成条形码

<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