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

来源：互联网发布：芒果tv mac版编辑：程序博客网时间：2024/05/19 06:47

首先定义一个所需要的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:" onclick="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

阅读全文

0 0