บทความนี้รวม bootstrap เพื่อสร้างแอปพลิเคชันที่ค่อนข้างสมบูรณ์เพื่อจัดการรายการผลิตภัณฑ์รวมถึงการเพิ่มผลิตภัณฑ์การลบและการปรับเปลี่ยน
คำพูด ที่จำเป็น
<script type = 'text/javascript' src = 'http: //www.see-source.com/js/knockout-2.2.0.js'> </script> <script type = 'text/javascript' src = 'http: //ww.see-source.com/js href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "stylesheet">
รหัส HTML
<body> <!-สร้างรายการผลิตภัณฑ์แบบไดนามิก-> <table> <thead> <tr> <th> id </th> <th> ชื่อผลิตภัณฑ์ </th> <th> ราคาเดิม </th> <th> ราคาโปรโมต </th> <th> การดำเนินการ </th> </tr> </td> <td> <อินพุต type = "text" data-bind = "value: $ data.name"/> </td> <td> <อินพุต type = "text type" data-bind = "value: $ data.price"/> </td> <td> data-bind = "คลิก: $ root.update"/> <อินพุตประเภท = "ปุ่ม" value = "ลบ" data-bind = "คลิก: $ root.remove"/> </td> </tbody> </table> <! <div> <อินพุต type = "text" name = "name"> </div> </div> <div> <label for = "input01"> ราคาดั้งเดิม </label> <div> <อินพุต type = "text" name = "price"> </div> </div> <button type = "subment"> บันทึก </button> <button> ยกเลิก </button> </div> </fieldset> </form> </body>
รหัส JS
<script type = "text/javascript"> function productsViewModel () {var baseuri = 'http: // localhost: 8080/knockout/'; var self = this; //self.products = ko.observablearray ([{'id': '111', 'ชื่อ': 'lenovo k900', 'ราคา': '3299', 'realcost': '3000'}, {'id': '222', 'ชื่อ': self.products = ko.observablearray (); $ .getJson (baseuri + "list", self.products); // โหลดรายการผลิตภัณฑ์ // เพิ่มผลิตภัณฑ์ self.create = ฟังก์ชั่น (formelement) {$ .post (baseuri + "เพิ่ม", $ (formelement) {}; } // แก้ไขผลิตภัณฑ์ self.update = ฟังก์ชั่น (ผลิตภัณฑ์) {$ .post (baseuri + "อัปเดต", ผลิตภัณฑ์, ฟังก์ชัน (ข้อมูล) {ถ้า (data.success) {แจ้งเตือน ("แก้ไขสำเร็จ");}}, "JSON"); } // ลบผลิตภัณฑ์ self.remove = ฟังก์ชั่น (ผลิตภัณฑ์) {$ .post (baseuri + "ลบ", "productId =" + product.id, ฟังก์ชั่น (ข้อมูล) {ถ้า (data.success) {// เมื่อการลบฝั่งเซิร์ฟเวอร์สำเร็จ }}}} ko.applybindings (ใหม่ ProductsViewModel ()); </script>หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น