juicer实现表格显示，增加或删除一条数据

最新推荐文章于 2021-07-18 14:38:58 发布

娶个兔子

最新推荐文章于 2021-07-18 14:38:58 发布

阅读量489

点赞数

分类专栏： web前端文章标签： juicer

本文链接：https://blog.csdn.net/qq_36014192/article/details/78410480

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先定义一个所需要的juicer模板，这里是tbody

  <table id="contentTable" class="table table-striped table-bordered table-hover tableFixedHead">
            <thead>
            <tr>
                <th style="text-align: center" >组号</th>
                <th style="text-align: center" >项目</th>
            </tr>
            </thead>
            <tbody class="recipeinfobox" id="reportProjectsTbody">

            </tbody>
            <tfoot>
            <tr>
                <td colspan="2" style="background-color: #f2f2f2">
                    <div>
                        <input type="text" id="adddrug" placeholder="请先选择种类"/>

                    </div>
                </td>
            </tr>
            </tfoot>
        </table>

<script  type="text/juicer" id="reportTemplateTpl">
		{@each result as item,index}
			<tr  data-e1quipment='{"type":"s{item.type}","id":"s{item.id}","ids":"s{item.ids}","pharmacyUnit":"s{pharmacyUnit}","medicinesName":"s{item.medicinesName}","sortNum":"s{item.sortNum}","medicinesNameSp":"s{item.medicinesNameSp}","standard":"s{item.standard}","unit":"s{item.unit}"}'>
				<td>
				<input id="ids" expd value="s{item.ids}" type="hidden"/>
				<input id="type_s{item.ids}" expd value ="s{item.type}" type="hidden"/>
				<input id="id_s{item.ids}" expd value="s{item.id}" type="hidden"/>
				<input id ="thisid_s{item.ids}" expd value="s{item.thisid}" type="hidden"/>
				<input id="sortNum_s{item.ids}" expd type="text"  value="s{item.sortNum}"/>
				</td>
				<td>
				 <span id="medicinesName_s{item.ids}" expd>s{item.medicinesName}</span>
				</td>
				 <td>
				   <span id="standard_s{item.ids}" expd>s{item.standard}</span>
				</td>
				<td>
				  <a href="javascript:" οnclick="del('s{item.ids}','s{item.ids}','s{item.type}',this)" title="删除"><i class="fa fa-trash-o"></i>删除</a>
				</td>
			</tr>
		 {@/each}
	</script>

通过下拉列表向table添加数据。

 $('#adddrug').combogrid({
                        panelWidth: 1150,
                        idField: 'code',
                        textField: 'name',
                        pagination: true,
                        pageSize: 10,
                        pageList: [10,25,50,100],
                        rownumbers: true,
                        method: 'post',
                        url:"",
                        mode: 'remote',
                        columns: [[
                            {field: 'id', title: 'ID', width: 60,hidden: true},
                            {field: 'ids', title: 'ID', width: 60,hidden: true},
                            {field: 'medicinesName', title: '通用名称', width: 100},
                            {field: 'mnemonicCode', title: '助记码', width: 100},
                            {field: 'medicinesNameSp', title: '商品名称', width: 100},
                            {field: 'mnemonicCodeSp', title: '第二助记码', width: 100},
                            {field: 'standard', title: '规格', width: 100}
                            
                        ]],

                            onClickRow: function (index, row) {
                                   //一条数据只能添加一次
                                     if ($.inArray(row.ids,projects) >= 0) {
                                         showTip("非药品项目不能重复！", "error", 3000);
                                         return;
                                     
                                 }
                               //要添加到table的数据集合
                                var data = {
                                    "ids":"",
                                    "id":"",
                                    "sortNum":0,
                                    "medicinesName":"",
                                    "medicinesNameSp":"",
                                    "standard":""
                                    "type":""

                                };
                                var result = new Array();
                                var result1 = new Object();
                              
                                
                                    data.medicinesName = medicinesName;
                                    data.standard = row.standard;
                                    data.unit=row.unit;
                                    data.unitCode=200;
                 
                                  
                                }
                                data.id = row.id;
                                data.ids= row.ids;
                                data.type = type;
                                data.pharmacyUnit=row.pharmacyUnit;
                                data.pharmacyUnitCode=1
                                data.sortNum = sortNum;   //这里的sorNum为序号，要定义为全局变量，初始值为1
                                data.templateId = row.ids;
                                 result.push(data);
                                result1.result = result;
                                //初始化模板
                                var tpl = getTemplate("reportTemplateTpl");
                                //构建table
                                var views = juicer(tpl, result1);
                                //显示
                                $("#reportProjectsTbody").append(views);
                                if($.inArray(data.templateId,projects)<0){
                                    projects.push(data.templateId);
                                }
                                sortNum++

                        }, keyHandler: {
                            query: function (q) {
                            }
                        }
                    });



  function getTemplate(id) {
    var tpl = $("#" + id).html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
    return tpl;
}

//删除
 function del(id,projectId,type,_this){
     $(_this).parent().parent().remove();
         sortNum = TrLength()+1;
         if(id && isNotEmpty(id)){
             delProjects.push(id);
         }
         var index = projects.indexOf(projectId);
         if (index > -1) {
             projects.splice(index, 1);
         }

 }
 function TrLength(){;
     return $("#reportProjectsTbody").find('tr').length;

 }






参考：hospitalOrdersTemplateAdd.jsp